كيف يمكنك التوقف مؤقتًا قبل إخفاء عنصر ما باستخدام jQuery؟

Question

أود أن أعرض رسالة نجاح على صفحتي.

أنا أستخدم jQuery fadeOut طريقة التلاشي ثم إزالة العنصر.يمكنني زيادة المدة لجعلها تستمر لفترة أطول، ولكن هذا يبدو غريبا.

ما أود حدوثه هو أن يتم عرض العنصر لمدة خمس ثوانٍ، ثم يتلاشى بسرعة، ثم تتم إزالته في النهاية.

كيف يمكنك تحريك هذا باستخدام jQuery؟

Answer 1

الجديد delay() يجب أن تقوم الوظيفة في jQuery 1.4 بالمهمة.

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

Answer 2

يستخدم setTimeout(function(){$elem.hide();}, 5000);

أين $elem هو العنصر الذي ترغب في إخفاءه، و 5000 هو التأخير بالمللي ثانية.يمكنك بالفعل استخدام أي وظيفة ضمن المكالمة إلى setTimeout(), ، يحدد هذا الرمز فقط وظيفة مجهولة صغيرة من أجل البساطة.

Answer 3

أثناء نجاح أسلوب @John Sheehan، واجهتك خلل في jQuery FadeIn/fadeOut ClearType في IE7.أنا شخصياً سأختار @John Millikin's 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 يفعل فقط ما تحتاجه:

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

Answer 4

للحصول على نهج مسج خالص، يمكنك القيام به

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

إنه اختراق، لكنه يؤدي المهمة

Answer 5

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

Answer 6

بناءً على تعليق dansays، يبدو أن ما يلي يعمل بشكل جيد تمامًا:

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

Answer 7

التحديث لـ 1.6.2

ستؤدي إجابة ناثان لونج إلى ظهور العنصر دون الانصياع للتأخير أو fadeOut.

هذا يعمل:

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

Answer 8

إجابة dansays لا تناسبني.لسبب ما، remove() يتم تشغيله على الفور ويختفي القسم قبل حدوث أي رسوم متحركة.

ومع ذلك، فإن الأعمال التالية (عن طريق حذف remove() طريقة):

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

لا أمانع إذا كانت هناك عناصر DIV مخفية على الصفحة (لا ينبغي أن يكون هناك أكثر من عدد قليل منها على أي حال).