jQuery का उपयोग करके तत्व को लुप्त करने से पहले आप कैसे रोकते हैं?

Question

मैं अपने पृष्ठ पर एक सफल संदेश फ़्लैश करना चाहता हूं।

मैं jQuery fadeOut विधि का उपयोग कर फीका करने के लिए और फिर तत्व को हटा रहा हूं। मैं इसे लंबे समय तक बनाने के लिए अवधि बढ़ा सकता हूं, हालांकि यह अजीब लग रहा है।

मैं क्या करना चाहूंगा तत्व को पांच सेकंड के लिए प्रदर्शित किया जाना चाहिए, फिर जल्दी से फीका हो, और अंत में हटा दिया जाए।

आप jQuery का उपयोग करके इसे कैसे एनिमेट कर सकते हैं?

Answer 1

jQuery 1.4 में नया delay() समारोह चाल करना चाहिए।

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove(); 

Answer 2

उपयोग setTimeout(function(){$elem.hide();}, 5000);

कहाँ $elem तत्व आप को छिपाने के लिए इच्छा है, और 5000 मिलीसेकेंड में विलंब हुआ है। आप वास्तव में कॉल के भीतर किसी भी फ़ंक्शन का उपयोग setTimeout() पर कर सकते हैं, वह कोड केवल सादगी के लिए एक छोटे से अज्ञात फ़ंक्शन को परिभाषित करता है।

Answer 3

var $msg = $('#msg-container-id'); 
$msg.fadeIn(function(){ 
    setTimeout(function(){ 
    $msg.fadeOut(function(){ 
     $msg.remove(); 
    }); 
    },5000); 
}); 

Answer 4

एक शुद्ध jQuery दृष्टिकोण के लिए, आप कर सकते हैं

$("#element").animate({opacity: 1.0}, 5000).fadeOut(); 

यह एक हैक है, लेकिन यह काम

Answer 5

@ जॉन शीहान के दृष्टिकोण से काम करता है, तो आप IE7 में jQuery fadeIn/fadeOut ClearType glitch में चलाने करता है । व्यक्तिगत रूप से, मैं @ जॉन मिलिकिन के setTimeout() दृष्टिकोण का चयन करूंगा, लेकिन यदि आप शुद्ध jQuery दृष्टिकोण पर सेट हैं, तो एक गैर-अस्पष्टता संपत्ति, जैसे मार्जिन पर एनीमेशन ट्रिगर करना बेहतर होगा।

var left = parseInt($('#element').css('marginLeft')); 
$('#element') 
    .animate({ marginLeft: left ? left : 0 }, 5000) 
    .fadeOut('fast'); 

यदि आप जानते हैं अपने मार्जिन एक निश्चित मूल्य होने के लिए आप थोड़ा क्लीनर हो सकता है:

$('#element') 
    .animate({ marginLeft: 0 }, 5000) 
    .fadeOut('fast'); 

संपादित: यह jQuery FxQueues plug-in की तरह लग रहा करता है तो आप सिर्फ क्या जरूरत है:

$('#element').fadeOut({ 
    speed: 'fast', 
    preDelay: 5000 
}); 

Answer 6

डान्ससे की टिप्पणी के बाद, निम्नलिखित पूरी तरह से काम करने लगता है:

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

Answer 7

डैनस का जवाब सिर्फ मेरे लिए काम नहीं करता है। किसी कारण से, remove() तुरंत चलता है और किसी भी एनिमेशन होने से पहले div गायब हो जाता है।

निम्नलिखित काम करता है, तथापि (remove() विधि को छोड़ते हुए से):

$('#foo').fadeIn(500).delay(5000).fadeOut(500); 

मुझे आपत्ति नहीं है अगर वहाँ पृष्ठ पर DIVs छिपे हुए हैं (वहाँ वैसे भी कुछ की तुलना में अधिक नहीं होना चाहिए)।

Answer 8

1.6.2

नाथन लांग के जवाब के लिए देरी या fadeOut पालन के बिना पॉप तत्व का कारण होगा अद्यतन।

यह काम करता है:

$('#foo').delay(2000).fadeOut(2000);