मैं सभी jQuery एनिमेशन को कैसे रोक सकता हूं?

Question

मुझे ऐसे मामले होने जा रहे हैं जहां मुझे कुछ उपयोगकर्ता इंटरैक्शन करने के लिए पृष्ठ पर सभी एनिमेशन को रोकना होगा, और फिर उपयोगकर्ता द्वारा प्रतिक्रिया के तुरंत बाद सभी एनिमेशन को फिर से शुरू करना होगा।

उदाहरण के लिए, मेरे पास एक एनीमेशन हो सकता है जो 1 एस अवधि में लुप्त हो रहा है, और 400 एमएमएस में मुझे इसे रोकना होगा। इसे 40% अस्पष्टता पर रोकना चाहिए, और जब तक मैं फिर से शुरू नहीं कर लेता, तब तक वहां रहना चाहिए, जिस बिंदु पर इसे छोड़ना चाहिए और 40% से 100% तक अपने फीड-इन को पूरा करने के लिए 600 मिलियन खर्च करना चाहिए।

पृष्ठ पर कई एनिमेशन हो सकते हैं, और मैं उन्हें सभी को रोकना चाहता हूं। इसके अतिरिक्त, कुछ एनिमेशन में पूर्ण होने के बाद जारी रखने के लिए और अधिक एनिमेशन हो सकते हैं, और सभी को काम करने की आवश्यकता होती है: जब मैं फिर से शुरू करता हूं, तो वर्तमान एनीमेशन को समाप्त करने की आवश्यकता होती है, और फिर कतार में अगला वाला प्रारंभ करने की आवश्यकता होती है, जैसे कि कुछ भी नहीं हुआ ।

jQuery में एनिमेशन को रोकने के लिए कोई अंतर्निहित समर्थन प्रतीत नहीं होता है; निकटतम मुझे मिल सकता है .stop(), जो एनीमेशन में वर्तमान स्थान पर रुक जाएगा, लेकिन बाद में फिर से शुरू नहीं हो सकता है; और यह या तो कतार में अगली एनीमेशन पर तुरंत चला जाता है, या एनीमेशन कतार पूरी तरह से साफ़ करता है।

मैं एनिमेशन को इस तरह से कैसे रोक सकता हूं जो मुझे बाद में फिर से शुरू करने देगा?

Answer 1

रोकें/फिर से शुरू विकल्प

pause plugin इस स्थिति के लिए अच्छी तरह से काम करेगा।

एचटीएमएल

<div class=demo> 
    <div id="box1" class="animationToPause"></div> 
    <div id="box2" class="animationToPause"></div> 
    <div id="box3" class="animationToPause"></div> 
</div> 
<input id="btnPause" type="button" value="Pause Animations" /> 

सीएसएस

div.demo { 
    border: 1px solid #555; 
    margin: 1em auto; 
    width: 550px; 
} 
#box1, #box2, #box3 { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 
#box1 { 
    background: #0C0; 
} 
#box2 { 
    background: #090; 
} 
#box3 { 
    background: #060; 
}​ 

जावास्क्रिप्ट

$(function() { 
    //Begin animation on boxes 
    $("div[id^='box']").each(function() { 
     phase1($(this)); 
    }); 

    //Setup animation pause/resume on hover 
    $("div[id^='box']").hover(function() { 
     $(this).pause(); 
    }, function() { 
     $(this).resume(); 
    }); 
}); 

//Toggle animation pause/resume on button click 
$("#btnPause").toggle(
    function() { 
     $(".animationToPause").pause(); 
    }, function() { 
     $(".animationToPause").resume() 
}); 

//Animation 1 
function phase1($this) { 
    $this.animate({ 
     left: 450 
    }, 2000, 'swing', function() { 
     phase2($this) 
    }); 
} 

//Animation 2 
function phase2($this) { 
    $this.animate({ 
     left: 0 
    }, 2000, 'swing', function() { 
     phase1($this) 
    }); 
}​ 

यहाँहै

ब्रूट फोर्स विकल्प

निश्चित रूप से आप के लिए क्या नहीं देख रहे हैं, लेकिन संबंधित।

jQuery.fx.off = true; सेट करना सभी एनिमेशन तुरंत बंद कर देगा।