मैं आगे बढ़ने के लिए jquery की एनिमेट विधि का उपयोग कैसे करूं

Question

मैं एक निश्चित क्षेत्र के भीतर क्षैतिज रूप से एक div एनिमेट करना चाहता हूं। मेरे पास अभी समस्या यह है कि मैं यह नहीं समझ सकता कि आगे बढ़ने के बाद मेरा div वापस कैसे स्थानांतरित किया जाए।

<script type="text/javascript"> 
    var animatethis = function (targetElement, speed) { 
     $(targetElement).animate(
      { 
       marginLeft: "+=250px" 
      }, 
      { 
       duration: speed, 
       complete: function() { 
        animatethis(this, speed); 
        animatethis.stop(); 
        $(targetElement).animate({ marginLeft: "-=250px" }); 
       } 
      } 
        ) 
    }; 
    animatethis($('#q1'), 5000); 
</script> 

Answer 1

देखो

यहाँ स्क्रिप्ट है कि मैं का उपयोग कर रहा है। animatethis कुछ भी वापस नहीं करता है, जिसका अर्थ है कि लाइन

animatethis.stop(); 

हमेशा दुर्घटना करने जा रहा है (जैसे कुछ "लेखन त्रुटि: कॉल नहीं कर सकता विधि अपरिभाषित के 'स्टॉप'")। आप complete कॉलबैक में एनिमेशन के क्रम को भी मिश्रित कर रहे हैं।

स्टॉप, सांस लें और सोचें कि आपका कोड वास्तव में क्या कर रहा है।

---

ठीक है, तो बाद marginLeft बढ़ जाती है, तो आप इसे कम करना चाहेंगे। फिर आप सभी को शुरू करना चाहते हैं। सही? तो:

function animatethis(targetElement, speed) { 
    $(targetElement).animate({ marginLeft: "+=250px"}, 
    { 
     duration: speed, 
     complete: function() 
     { 
      targetElement.animate({ marginLeft: "-=250px" }, 
      { 
       duration: speed, 
       complete: function() 
       { 
        animatethis(targetElement, speed); 
       } 
      }); 
     } 
    }); 
}; 

animatethis($('#q1'), 5000); 

इस बिल्ली को त्वचा के कई अन्य तरीके हैं, लेकिन यह काम करता है। http://jsfiddle.net/mattball/rKu6Y/

Answer 2

उपयोग jQuery queue() विधि श्रृंखला घटनाओं के लिए: http://api.jquery.com/queue/ आपके ब्राउज़र कंसोल में

Answer 3

क्या आप ऐसा करने की कोशिश कर रहे हैं? http://jsfiddle.net/vwH6R/2/

setInterval(function(){ 
    $("div").stop(true,true).animate({left: 300}, 1000, 
      function(){ $(this).stop(true,true).animate({left: 0}, 1000); 
    }); 
}, 2000);​ 

Answer 4

प्रयास करें this बेला

एचटीएमएल

<div class="myDiv">A Div</div>​ 

जे एस

$('.myDiv').animate({ 
    'margin-left':'50px' 
}, 500, function(e){ 
$('.myDiv').animate({ 
    'margin-left':'0px' 
}, 500)});​ 

Answer 5

आप इसे एक n के लिए वापस और आगे ले जाने के लिए जा रहे हैं कई बार, आप इसे एक फ़ंक्शन में लपेट सकते हैं, जो स्वयं को कॉल करता है। कुछ ऐसा:

function wobble(selector, amount, times, intSpeed) { 

    var string = String($(selector).css("marginLeft")).replace("px", ""), 
    leftMargin = parseInt(string, 10); 

    $(selector).animate({ marginLeft: (leftMargin + amount) + 'px' }, intSpeed, function() { 
     if (times > 0) { 
      wobble(selector, -amount, --times, intSpeed); 
     } else { 
      $(selector).css("marginLeft", leftMargin + 'px'); 
     } 
    }); 
}