সময়সীমা jQuery প্রভাব

101

আমি একটি উপাদান ফেইড ইন করার চেষ্টা করছি, তারপরে 5000 এমএসে আবার বিবর্ণ back আমি জানি আমি এর মতো কিছু করতে পারি:

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

তবে এটি কেবল বিবর্ণকে নিয়ন্ত্রণ করবে, আমি কি কলব্যাকের উপরেরটি যুক্ত করব?

jquery timeout

— Coughlin
সূত্র

197

আপডেট: 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');

— কেন্ট ফ্রেড্রিক
সূত্র

1

আমি ভাবছি আপনি কেন সারিটি ব্যবহার করছেন যখন সেটটাইমআউটের একটি সাধারণ ব্যবহার পাশাপাশি কাজ করবে।

— সমাধান

33

কারণ আপনি যদি সারিটি ব্যবহার করেন তবে কোডটিতে নতুন ইভেন্ট যুক্ত করা এবং পুনরায় ব্যবহার করা সহজ, এবং কোড পুনরায় ব্যবহার একটি গুডথিং ™

— কেন্ট ফ্রেড্রিক

2

নোট করুন, jQuery এপিআই ডকুমেন্টেশনে যেমন বলা হয়েছে, বিলম্ব () সত্যই কেবলমাত্র প্রভাব সারি সম্পর্কিত জিনিসগুলির জন্য ব্যবহার করা উচিত। অন্য কোনও কিছুর জন্য যদি আপনার টাইমআউট দরকার হয়, সেটটাইমআউট () এখনও যাওয়ার উপায়।

— scy

বাহ, লিঙ্কটি @ বোতলেনেকডের জন্য ধন্যবাদ, আমি অনুমান করি যে আমার উদাহরণটি jQuery- র সাথে যুক্ত নতুন বৈশিষ্ট্যের সাথে এতটা সমান কারণ হ'ল bugs.jquery.com/ticket/4102 = পি

— ক্যান্ট ফ্রেড্রিক

23

আমি কেবল এটি নীচে খুঁজে বের করেছি:

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

পোস্টটি অন্য ব্যবহারকারীদের জন্য রাখব!

— Coughlin
সূত্র

14

@ স্ট্রেজার দ্বারা দুর্দান্ত হ্যাক। এটি এর মতো jQuery এ প্রয়োগ করুন:

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

এবং তারপরে এটি ব্যবহার করুন:

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

— আরশ মিলানি
সূত্র

11

আপনি এর মতো কিছু করতে পারেন:

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

দুঃখের বিষয়, আপনি কেবল .animate ({}, 2000) করতে পারবেন না - আমি মনে করি এটি একটি বাগ, এবং এটি রিপোর্ট করবে।

— strager
সূত্র

7

বেন আলমান ডুটাইমআউট নামক jQuery এর জন্য একটি মিষ্টি প্লাগইন লিখেছিলেন। এটিতে অনেক সুন্দর বৈশিষ্ট্য রয়েছে!

এটি এখানে দেখুন: jQuery doTimeout: সেটটাইমআউট পছন্দ, তবে আরও ভাল ।

— জেসন
সূত্র

5

এটির মতো ব্যবহার করতে সক্ষম হতে আপনাকে ফিরে আসতে হবে 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');

— user128026
সূত্র

1

এটি 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/

— DaveAlger
সূত্র