टाइमआउट jQuery के प्रभाव

Question

मैं एक तत्व को फीका करने की कोशिश कर रहा हूं, फिर 5000 एमएस में फिर से फीका हो सकता है। मुझे पता है कि मैं कुछ ऐसा कर सकता हूं:

setTimeout(function () { $(".notice").fadeOut(); }, 5000);

लेकिन यह केवल फीका को नियंत्रित करेगा, क्या मैं कॉलबैक पर उपरोक्त जोड़ दूंगा?

Answer 1

अद्यतन: jQuery 1.4 के रूप में आप .delay( n )विधि का उपयोग कर सकते हैं । http://api.jquery.com/delay/

$('.notice').fadeIn().delay(2000).fadeOut('slow'); 

नोट : $.show()और $.hide()डिफ़ॉल्ट रूप से पंक्तिबद्ध नहीं हैं, इसलिए यदि आप $.delay()उनके साथ उपयोग करना चाहते हैं, तो आपको उन्हें इस तरह कॉन्फ़िगर करने की आवश्यकता है:

$('.notice')
    .show({duration: 0, queue: true})
    .delay(2000)
    .hide({duration: 0, queue: true});

---

आप संभवतः क्यू सिंटैक्स का उपयोग कर सकते हैं, यह काम कर सकता है:

jQuery(function($){ 

var e = $('.notice'); 
e.fadeIn(); 
e.queue(function(){ 
  setTimeout(function(){ 
    e.dequeue(); 
  }, 2000 ); 
}); 
e.fadeOut('fast'); 

}); 

या आप वास्तव में सरल हो सकते हैं और इसे करने के लिए एक jQuery फ़ंक्शन बना सकते हैं।

(function($){ 

  jQuery.fn.idle = function(time)
  { 
      var o = $(this); 
      o.queue(function()
      { 
         setTimeout(function()
         { 
            o.dequeue(); 
         }, time);
      });
  };
})(jQuery);

जो (सिद्धांत रूप में, यहाँ पर काम कर रहा है) आपको इसकी अनुमति देगा:

$('.notice').fadeIn().idle(2000).fadeOut('slow'); 

Comments

मुझे आश्चर्य हो रहा है कि जब आप सेटटाइमआउट का सरल उपयोग करेंगे, तो आप कतार का उपयोग क्यों कर रहे हैं।

— SolutionYogi

क्योंकि यदि आप कतार का उपयोग करते हैं, तो कोड में पुन: उपयोग करने के लिए नई घटनाओं को जोड़ना आसान है, और कोड का पुन: उपयोग एक GoodThing ™ है

— केंट फ्रेड्रिक

ध्यान दें कि, जैसा कि jQuery एपीआई प्रलेखन में कहा गया है, देरी () वास्तव में केवल प्रभाव कतार से संबंधित चीजों के लिए उपयोग की जानी चाहिए। यदि आपको किसी और चीज के लिए टाइमआउट की जरूरत है, तो सेटटाइमआउट () अभी भी जाने का रास्ता है।

— 9

वाह, लिंक @bottlenecked के लिए धन्यवाद, मुझे लगता है कि इसका कारण यह है कि मेरा उदाहरण jQuery में जोड़े गए नए फीचर के समान है कि इस उत्तर से Bugs.jquery.com/ticket/4108

— कैंट फ्रेड्रिक

Answer 2

मैंने इसे नीचे समझ लिया है:

$(".notice")
   .fadeIn( function() 
   {
      setTimeout( function()
      {
         $(".notice").fadeOut("fast");
      }, 2000);
   });

मैं अन्य उपयोगकर्ताओं के लिए पोस्ट रखूंगा!

Answer 3

@Strager द्वारा शानदार हैक। इसे इस तरह jQuery में लागू करें:

jQuery.fn.wait = function (MiliSeconds) {
    $(this).animate({ opacity: '+=0' }, MiliSeconds);
    return this;
}

और फिर इसका उपयोग करें:

$('.notice').fadeIn().wait(2000).fadeOut('slow');

Answer 4

आप ऐसा कुछ कर सकते हैं:

$('.notice')
    .fadeIn()
    .animate({opacity: '+=0'}, 2000)   // Does nothing for 2000ms
    .fadeOut('fast');

अफसोस की बात है, आप सिर्फ .animate ({}, 2000) नहीं कर सकते - मुझे लगता है कि यह एक बग है, और इसे रिपोर्ट करेगा।

Answer 5

बेन Alman ने jQuery के लिए एक मिठाई प्लगइन लिखा जिसे doTimeout कहा जाता है। इसमें बहुत सारी अच्छी विशेषताएं हैं!

इसे यहाँ देखें: jQuery doTimeout: setTimeout की तरह, लेकिन बेहतर ।

Answer 6

इसे इस तरह उपयोग करने में सक्षम होने के लिए, आपको वापस लौटने की आवश्यकता है this। वापसी के बिना, fadeOut ('धीमा'), उस ऑपरेशन को करने के लिए एक ऑब्जेक्ट नहीं मिलेगा।

अर्थात:

  $.fn.idle = function(time)
  {
      var o = $(this);
      o.queue(function()
      {
         setTimeout(function()
         {
            o.dequeue();
         }, time);
      });
      return this;              //****
  }

फिर ऐसा करें:

$('.notice').fadeIn().idle(2000).fadeOut('slow');

Answer 7

यह jQuery की केवल कुछ पंक्तियों के साथ किया जा सकता है:

$(function(){
    // make sure img is hidden - fade in
    $('img').hide().fadeIn(2000);

    // after 5 second timeout - fade out
    setTimeout(function(){$('img').fadeOut(2000);}, 5000);
});​

---

एक काम करने के उदाहरण के लिए नीचे दिए गए फ़िदे देखें ...

http://jsfiddle.net/eNxuJ/78/