jQuery: frupIn()/fadeOut()

Question

मान लें कि मैंने $ element.fadeIn (200) कहा है। 100 एमएस बाद में, उस पृष्ठ पर कुछ होता है और मैं उस फीका को तुरंत बाधित करना चाहता हूं और तुरंत fadeOut()। मैं यह कैसे कर सकता हूँ?

यदि आप $ element.fadeIn (200) .fadeOut (0) को कॉल करते हैं, तो fadeOut() केवल fadeIn() समाप्त होने के बाद होता है।

साथ ही, क्या कोई तरीका है कि मैं यह निर्धारित करने के लिए $ तत्व की जांच कर सकता हूं कि fadeIn() या fadeOut() चल रहा है या नहीं? क्या $ तत्व में कोई .data() सदस्य है जो बदलता है?

Answer 1

कतार से एनीमेशन निकालने का प्रयास करें।

$('...').fadeIn(200).dequeue().fadeOut(0); 

http://api.jquery.com/queue/

http://api.jquery.com/dequeue/

Answer 2

AFAIK fadeIn और fadeOut रन तुल्यकालिक, इसलिए कोई, मुझे नहीं लगता कि आप उन्हें बाधित कर सकते हैं, जबकि वे चल रहे हैं है। जब तक इसे निष्पादित नहीं किया जाता है तब तक आपको इंतजार करना होगा।

यदि आप तत्व पर stop विधि को कॉल करते हैं तो यह सभी एनिमेशन को रोक देगा। fadeOut आपके उदाहरण में कॉल को fadeIn के बाद तक कॉल नहीं किया जाता है क्योंकि एनिमेशन को कतार जैसी फैशन में निष्पादित किया जाता है।

Answer 3

आप उस विशेष पल के दौरान होने वाली किसी भी एनीमेशन को बाधित करने के लिए स्टॉप() फ़ंक्शन का उपयोग कर सकते हैं। अगर यह कार्यशील है, तो मुझे बताएं।

Answer 4

फ़ंक्शन के कॉलबैक के अंदर एनीमेशन आदि से निपटने वाले कार्यों को रखने के लिए यह हमेशा एक अच्छा अभ्यास है। अगर यह संभव नहीं है तो आप समारोह के बाहर एक चर घोषणा कर सकते हैं

$element.fadeIn(200, function(){ 
    //do callback 
}); 

: आप बता सकते हैं कि fadein() की तरह अपनी कॉलबैक के भीतर से अपने समारोह कर रही है, के द्वारा समाप्त हो गया है। कहो, var elmFadeInRunning = झूठी। FadeIn को कॉल करने से पहले इसे सही दाएं में बदलें और fadeIn के कॉलबैक में इसे वापस गलत में बदलें। इस तरह से आप जान सकते हैं कि यह अभी भी चल रहा है अगर elmFadeInRunning == सत्य है।

Answer 5

stop() केवल उन एनिमेशन को हटा देगा जिन्हें अभी तक निष्पादित नहीं किया गया है।

वर्तमान एनीमेशन को बाधित करने और हटाने के लिए stop(true, true) का उपयोग करें!

Answer 6

आपको कतार को साफ़ करके चिकनी फीडइन/आउट प्रभाव मिलेगा, लेकिन .stop (true, false) का उपयोग करके अंत तक कूद नहीं पाएंगे, लेकिन कृपया ध्यान दें कि FadeIn इस तरह बाधित हो सकता है, FadeOut नहीं कर सकता। मैंने इसे कई साल पहले एक बग के रूप में बताया, लेकिन कोई भी परवाह नहीं करता था। फ़ेडइन केवल तभी काम करता है जब ऑब्जेक्ट छुपा हुआ हो। लेकिन वहाँ समाधान नहीं है ... का उपयोग FadeTo बजाय - यह छिपा हुआ है और साथ ही आंशिक रूप से फीका वस्तुओं पर काम करता है:

$('.a').hover(function(){ 
    $('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!) 
},function(){ 
    $('.b').stop(true,false).fadeOut(3000); 
}); 

यहाँ यह कैसे काम करता है: http://jsfiddle.net/dJEmB/

Answer 7

एक और काम कर रहे उदाहरण

<div id="fadediv">Yay, I like to fade</div> 
<button id="stopdatfade" >Stop that fade!</button> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script> 
(function($){ 

    currentfade = $("#fadediv").fadeOut(5000).fadeIn(5000).fadeOut(5000).fadeIn(5000); 
    $('#stopdatfade').on('click', function() { 
     if (typeof currentfade !== 'undefined') { 

      currentfade.stop(true, true); 

     } 

    }); 
})(jQuery); 
</script>