एनिमेटिंग के दौरान jQuery की एनीमेशन अवधि बदलें

Question

क्या वर्तमान में चल रहे jQuery एनीमेशन के duration को दो अलग-अलग मानों के बीच बदलना संभव है?

मैं प्रत्यक्ष काम के माध्यम से duration बदलने की कोशिश की है, लेकिन कोई सफलता:

var timing = { duration: 4000 }; 
$(document).click(function (e) { 
    timing.duration = 1000; 
}); 

$('#foo').animate({top:200, left:200}, timing); 

... और यहां तक ​​कि, fx.options.durationstep में -method बदलते चल एनीमेशन को प्रभावित नहीं करता:

var state = false, 
$(document).click(function (e) { 
    state = true; 
}); 

$('#foo').animate({top:200, left:200}, { 
    duration: 4000, 
    step: function(now, fx){ 
    if(state) fx.options.duration = 1000; 
    console.log(fx.options.duration); // 1000 
    } 
}); 

यहां एक fiddle खेलने के लिए है। कोई विचार यह कैसे किया जा सकता है?

Answer 1

अवधि मूल्य द्वारा पारित की जाती है, संदर्भ के अनुसार नहीं। तो animateduration का संदर्भ संग्रहीत नहीं करता है। यहां तक ​​कि यदि आप ऑब्जेक्ट ऑब्जेक्ट को अपडेट करते हैं (जो संदर्भ द्वारा पारित किया जाता है) jQuery आंतरिक रूप से options.duration का उपयोग करता है, जिसका अर्थ है कि यह मूल्य से पारित किया जाएगा।

एक त्वरित फिक्स के रूप में आप एनीमेशन को रोक सकते हैं और इसे नई अवधि के साथ पुनरारंभ कर सकते हैं - एनीमेशन के हिस्से के लिए समायोजन जो पहले से खत्म हो चुका है।

आपको यह विचार करना होगा कि आप इसे कैसे व्यवहार करना चाहते हैं, उदाहरण के लिए जब आप 3 सेकंड के बाद 2 सेकंड एनीमेशन में 4 सेकंड एनीमेशन तेज करते हैं। नीचे दिए गए कोड में एनीमेशन तत्काल होगा। इसके बारे में सोचते हुए, संभवतया आप जो चाहते हैं वह नहीं है क्योंकि आप शायद वास्तव में गति की परवाह करते हैं, अवधि नहीं।

नीचे दिया गया कोड एक मोटा स्केच है, मुझे यकीन नहीं है कि यह सही है, अगर यह एनीमेशन मान कम करने या यह कई एनीमेशन मानों को कैसे प्रबंधित करता है तो यह काम करता है। आप केवल एक बार अवधि बदल सकते हैं।

var state = false, 
    duration = 8000; 

$(document).click(function (e) { 
    state = true; 
    duration = 1000; 
}); 
var animationCss = {top:200, left:200}; 
$('#foo').animate(animationCss, { 
    duration: duration, 
    step: function(now, fx){ 
     if(state) { 
      $("#foo").stop(); 
      var percentageDone = (fx.now - fx.start)/(fx.end - fx.start) 
      var durationDone = fx.options.duration * percentageDone; 
      var newDuration = duration - durationDone; 
      if (newDuration < 0) 
      { 
       newDuration = 0; 
      } 
      $("#foo").animate(animationCss, { duration: newDuration}) 

     } 
    } 
}); 

http://fiddle.jshell.net/5cdwc/3/

Answer 2

मैं सेशन के लिए देर से थोड़ा शायद हूँ लेकिन जब से मैं यहाँ समाप्त हो गया एक ही बात करने के लिए प्रयास करते हुए, किसी और भी हो सकता है।

start() कॉलबैक पर jQuery एनीमेशन ऑब्जेक्ट को तर्क के रूप में पास करता है, इसलिए आपको संदर्भ कहीं और रखना होगा और फिर आप इसे step() कॉलबैक पर बदल सकते हैं।

कुछ की तरह:

var animEnd = false; //this will be updated somewhere else 
var animObj; 
$().animate({ 
     width: '100%' 
    }, 
    { 
     start: function(animation){ 
      animObj = animation; 
     }, 
     step: function(now, tween){ 
      if(!animEnd) 
       //jquery set an interval of 13 but let's be safe 
       animObj.duration += 30; 

      //you can change the value of tween.pos aswell 
     } 
    } 
); 

अब मुश्किल बात यह है कि jQuery रोकने या step() कॉलबैक कॉल करने से पहले एनीमेशन जारी रखने के लिए तय है। इसलिए अवधि अगले टिक के लिए निर्धारित की गई है और यदि यह पर्याप्त रूप से सेट नहीं किया गया था तो आपकी एनीमेशन बंद हो सकती है।
jQuery 1312 के अंतराल के साथ setInterval() का उपयोग करें ताकि सैद्धांतिक रूप से step() प्रत्येक 13ms कहा जा सके लेकिन चूंकि कुछ भी गारंटी नहीं है, मुझे लगता है कि अवधि को न्यूनतम रूप से 30ms तक बढ़ाया जाना चाहिए।
व्यक्तिगत रूप से मैं कम से कम 100 के लिए भी जाऊंगा। बेहतर एक एनीमेशन है जो बहुत जल्द चल रहा है (100ms लगभग अनजान है) इसे जल्द से जल्द रोकने के बजाए।