अंतराल थोड़ी देर के लिए दोहराने के बाद तुरंत स्पष्ट नहीं है

Question

मेरे पास है कि मैं jQuery और setInterval के साथ बनाया अपनी वेबसाइट पर कोई उछल तीर, इस तरह:

bouncing = setInterval(function() { 
    $("div").animate({ 
     top:"30px" 
    },100,"easeInCubic",function() { 
     $("div").animate({ 
      top:"0px" 
     },100,"easeOutCubic"); 
    }); 
    console.log("bounced"); 
},200); 

आप यहां codepen में जगह में देख सकते हैं : http://codepen.io/mcheah/pen/wMmowr

मैंने इसे आवश्यकतानुसार तेज़ी से चलाया क्योंकि मुद्दों को तेज़ी से देखना आसान है। मेरी समस्या यह है कि कुछ सेकंड के लिए अंतराल चलने के बाद, आप देखेंगे कि तुरंत बैक अप या डाउन बाउंस करने के बजाय, उछाल वाला तत्व आधे सेकेंड तक रुक जाएगा और फिर फिर से शुरू होने से पहले वहां लटका होगा। यदि आप इसे और भी लंबे समय तक चलते हैं (20 सेकंड) और फिर अंतराल को साफ़ करते हैं, तो आप देखेंगे कि बाउंसिंग रोकने में कुछ सेकंड लगते हैं।

1. क्यों उछाल वाली सिंक्रनाइज़ेशन से बाहर कभी कभी हो जाता है:

   मेरे सवालों इन कर रहे हैं?

2. स्पष्ट अंतराल को थोड़ी देर के लिए दोहराने के लिए कुछ समय क्यों लगता है?

3. क्या बाउंसिंग तीर रखने का कोई बेहतर तरीका है? सीएसएस संक्रमण अधिक भरोसेमंद हैं?

आपकी मदद के लिए धन्यवाद!

Answer 1

कि दोनों पूरी तरह से समन्वय बाहर आते हैं। यह परेशानी के लिए पूछ रहा है और दोनों समय के साथ अलग हो सकते हैं, इसलिए इसे एक खराब डिजाइन पैटर्न माना जाता है।

, तो इसके बजाय, आप बस दूसरा एनीमेशन के पूरा होने के पहले पुनरारंभ करें और इस तरह अपने को दोहराने के लिए उपयोग करते हैं, तो आप सही समन्वय हर बार की है।

आप अपने codepen का एक और संस्करण में है कि यहाँ देख सकते हैं: http://codepen.io/anon/pen/NxYeyd

function run() { 
    var self = $("div"); 
    if (self.data("stop")) return; 
    self.animate({top:"30px"},100, "easeInCubic") 
     .animate({top:"0px"}, 100, "easeOutCubic", run); 
} 

run(); 


$("div").click(function() { 
    // toggle animation 
    var self = $(this); 
    // invert setting to start/stop 
    self.data("stop", !self.data("stop")); 
    run(); 
    console.log("toggled bouncing"); 
}); 

Answer 2

1. टाइमर के साथ animate() मिश्रण करना अच्छा नहीं है। नहीं मौका है कि आप इस तरह कुछ सिंक्रनाइज़ कर सकते हैं। और इसकी कोई आवश्यकता नहीं है। आप बस एनीमेशन कतार में एक समारोह जोड़ सकते हैं, यहाँ देखो: https://stackoverflow.com/a/11764283/3227403

2. क्या animate() है एक नौकरी कतार जो बाद में कार्रवाई की जाएगी, जब सही समय आता है में एक एनीमेशन अनुरोध डाल दिया है। जब आप अंतराल तोड़ते हैं तो कतार में जमा की गई सामग्री अभी भी संसाधित की जाएगी। कतार को साफ़ करने और तुरंत सभी एनीमेशन को रोकने के लिए एक तरीका है।

3. JQuery एनीमेशन फ़ंक्शन वास्तव में सीएसएस में हेरफेर करते हैं, और HTML में इससे परे कुछ भी नहीं है। एक और विकल्प कैनवास का उपयोग करेगा, लेकिन यह एक पूरी तरह से अलग दृष्टिकोण है और मैं इसकी अनुशंसा नहीं करता। JQuery के एनीमेशन के साथ आप पहले से ही सबसे अच्छी पसंद पर हैं।

यह आपकी समस्या का एक सरल उपाय है:

function bounce() 
{ 
    $("div") 
    .animate({ 
     top: "30px" 
    }, 100, "easeInCubic") 
    .animate({ 
     top: "0px" 
    }, 100, "easeOutCubic", bounce); // this loops the animation 
} 

प्रारंभ के साथ पृष्ठ लोड पर उछल:

$(bounce); 

बंद करो के साथ क्लिक पर उछल:

$("div").click(function() { 
    $("div").stop().clearQueue().css({ top: "0px" }); 
    // you want to reset the style because it can stop midway 
}); 

संपादित करें: कुछ त्रुटियां थीं जिन्हें मैंने अभी सही किया था। चल रहा उदाहरण codepen now पर है।

Answer 3

आप एनीमेशन के लिए जावास्क्रिप्ट का उपयोग करने की Greensock ट्वीन पुस्तकालय की तरह बेहतर कुछ का उपयोग कर सकते http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/ कुछ इस तरह चाहते हैं: अपने पूरी तरह से एक setInterval() टाइमर और दो jQuery एनिमेशन ऐसे समन्वय करने के लिए कोशिश कर रहे हैं

var tween = TweenMax.to($("div"), 100, {y: "100px", yoyo: true, repeat: -1}); 

Answer 4

आप के साथ अपने अंतराल कोड लपेट सकता है:

if(!$("div").is(":animated")) 

यह अपने एनीमेशन आरंभ हो जाएगा केवल अगर अपने पिछले एक है ख़त्म होना। कारण यह अजीब उछाल रहा था कि आपके एनिमेशन कतारबद्ध हैं। आप देख सकते हैं कि यह कैसे अब काम करता है:

http://codepen.io/luminaxster/pen/qNVzLY