क्या एनीमेशन के शेष समय को पाने का कोई तरीका है?

Question

मान लीजिए कि मेरे पास कुछ div है, और मैं अपने बच्चों के लिए .animate({opacity:0},400, function(){}); का उपयोग करता हूं। क्या एनीमेशन के पूरा होने के लिए शेष समय प्राप्त करना संभव है? उदाहरण के लिए, 200 एमएस शेष, या 0 अगर कोई एनीमेशन नहीं है? धन्यवाद।

Answer 1

मदद करने के लिए आप को बेहतर समझते हैं कि कैसे आप step समारोह
[के रूप में gdoron द्वारा पोस्ट की गई] मैं कदम का उपयोग कर समारोह शेष समय प्राप्त करने के लिए एक उदाहरण बनाया का उपयोग कर सकते हैं:

(एनीमेशन को रोकने और शेष समय को पुनर्प्राप्त करने के लिए get state! बटन पर क्लिक करें!)

demo with distance
demo with opacity

दूरी उदाहरण jQuery:

var time = 4000; 
var distance = 300; 
var currentTime = 0; 

$('#ball').animate({ 
    left: distance 
}, { 
    duration: time, 
    step: function (now, fx) { 

     currentTime = Math.round((now * time)/distance); 
     var data = fx.prop + ' ' + Math.round(now) + '; <b>' + currentTime + 'ms</b> '; 

     $('body').append('<p>' + data + '</p>'); 
    }, 
    easing: 'linear' 
}); 

$('#getTime').click(function() { 
    $('#ball').stop(); 
    $('body').prepend('<p>currentTime is:' + currentTime + ' ms; REMAINING: ' + (time - currentTime) + 'ms</p>'); 
}); 

• आप देख सकते हैं कि कैसे मैं (left) संपत्ति है कि वर्तमान में एनिमेटेड है पाने के लिए animation step अंदर fx.prop इस्तेमाल किया।
  
• आप देख सकते हैं कि: एनीमेशन समय और दूरी जानने (अस्पष्टता, जो कुछ भी ...) हम आसानी से प्राप्त कर सकते हैं राज्य कुछ सरल गणित ((now*time)/distance) और लौट आए now मूल्य के लिए धन्यवाद द्वारा 'बंद कर दिया/रोका गया' ।

Answer 2

मुझे पता नहीं क्यों आपको इसकी आवश्यकता है, लेकिन step मदद कर सकते हैं यह मान निकालें:

चरण समारोह

.animate के दूसरे संस्करण() एक कदम विकल्प प्रदान करता है - एक कॉलबैक फ़ंक्शन जिसे एनीमेशन के प्रत्येक चरण पर निकाल दिया जाता है। यह फ़ंक्शन कस्टम एनीमेशन प्रकारों को सक्षम करने या एनीमेशन को बदलने के लिए उपयोगी है क्योंकि यह हो रहा है। यह दो तर्क (अब और एफएक्स) स्वीकार करता है, और यह एनिमेटेड होने वाले डीओएम तत्व पर सेट है।

अब: संपत्ति के संख्यात्मक मान प्रत्येक चरण में एनिमेटेड किया जा रहा
fx: jQuery.fx प्रोटोटाइप वस्तु के लिए एक संदर्भ है, जो इस तरह के एनिमेटेड तत्व, शुरुआत के लिए ELEM के रूप में संपत्तियों की एक संख्या में शामिल और क्रमशः एनिमेटेड संपत्ति के पहले और अंतिम मूल्य के लिए समाप्त होता है, और एनिमेटेड संपत्ति के लिए प्रोप।

docs

Answer 3

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

छद्म कोड:

func calculate-time-left-in-a-running-fade-in-animation: 
{ 
    var current_opacity = $elem.css('opacity'); 
    var target_opacity = this.getTargetOpacity(); 

    var total = this.getTotalAnimationTime(); 

    var quotient = current_opacity/target_opacity; 
    return total - quotient * total; 
} 

बस जिज्ञासा से बाहर