लूप कैसे करें। Jimate

Question

मैं एक छवि के साथ एक एकल div के साथ काम कर रहा हूं। मुझे पृष्ठ के दाएं-बाएं से स्क्रॉल करने के लिए एनीमेशन की आवश्यकता है और फिर दाईं ओर वापसी करें और लूप में जारी रखें। मैंने यहां कई पोस्ट देखी हैं लेकिन स्क्रिप्ट ठीक से काम नहीं कर पा रहा हूं।

'$(document).ready(function(){ 
    function loop() { 

     $('#clouds').animate({left: '+=1400',},50000, 'linear', function(){ 
      loop(); 
     }); 

एचटीएमएल

< div id="clouds">< img border="0" alt="animated clouds" src="/images/clouds.png" />< /div> 

सीएसएस

#clouds { 
    position:absolute; 
    z-index:500; 
    right:0px; 
    top:10px; 
} 

Answer 1

इस प्रयास करें। लूप फ़ंक्शन के अंदर, मैंने

$('#clouds').css({right:0}); 

और लूप वहां से जारी रहेगा। मैंने आपकी एनीमेशन को "दाएं" संपत्ति को एनिमेट करने के लिए भी बदल दिया क्योंकि आपने कहा था कि आप बादलों को दाएं से बाएं स्थानांतरित करना चाहते हैं।

इसके अलावा, आपका जावास्क्रिप्ट अच्छी तरह से गठित नहीं हुआ था। सुनिश्चित करें कि आप उन समापन ब्रेसिज़ और कोष्ठक प्राप्त करते हैं! यहां तय जावास्क्रिप्ट है।

$(document).ready(function() { 
    function loop() { 
     $('#clouds').css({right:0}); 
     $('#clouds').animate ({ 
      right: '+=1400', 
     }, 5000, 'linear', function() { 
      loop(); 
     }); 
    } 
    loop(); 
}); 

Answer 2

JavaScript:

$(document).ready(function() { 

    $('#clouds').click(function() { 
loop();  
    }); 

function loop(){ 
    alert('a'); 
     $('#clouds').animate({ 
      opacity: 0.25, 
      left: '+=1400', 
      height: 'toggle' 
     }, 5000, 'linear', function() { 
      loop(); 
     }); 

} 

}); 

HTML:

<div id="clouds"><img border="0" alt="animated clouds" src="../img/image.png" /></div> 

आपकी त्रुटि यह है कि आप फ़ंक्शन लूप को कभी भी कॉल नहीं कर रहे हैं। देखें कि it works, आप alert('a') को हटा सकते हैं क्योंकि यह जानने के लिए कि यह चक्र शुरू हो गया है, यह सिर्फ एक ध्वज है। अब आपको रिवर्स आंदोलन (जैसे आंदोलन चक्र से शुरू करने के लिए div को रीसेट करना) बनाना होगा। आप सही पक्ष को वापस बादलों नहीं जा रहे हों

JSFiddlehttp://jsfiddle.net/2YqH2/

: