jQuery: تتلاشى ، وأداء إجراء ، ثم يتلاشى مرة أخرى

Question

لذلك لدي ما يصل إلى نموذج HTML ، لكنه ليس فعليًا <form>, ، في حد ذاته. لدي زر "واضح" أستخدمه حاليًا لإعادة تعيين جميع الحقول إلى الإعدادات الافتراضية.

من وجهة نظر جمالية ، أود أن يتلاشى النموذج ، وإعادة ضبطه أثناء "ذهب" ، وتتلاشى مرة أخرى في إعادة التعيين بالكامل. لقد حصلت على هذا الرمز حتى الآن لمحاولة تحقيق ذلك:

function Reset() {

    $formDiv.fadeOut(function() {

        // perform reset actions here
        $(this).fadeIn()
    });
}

ومع ذلك ، فإن ما يحدث ، حيث يتلاشى Div ، يتم إعادة تعيين الحقول ، لذلك يرى المستخدم جميعهم يتغيرون جسديًا إلى الإعدادات الافتراضية أثناء تلاشيه. ثم يتلاشى مرة أخرى بمجرد الانتهاء من التلاشي. أغلق ، لكنني لا أريد أن يرى المستخدم أن الحقول تتم إعادة تعيينها. لقد جربت ما يلي حتى تنتظر حتى يكتمل Fadeout لإعادة ضبط الحقول ، لكنني حصلت على حلقة لا حصر لها أو شيء من هذا القبيل (قال المتصفح أن السيناريو كان يعمل ببطء وسألني عما إذا كنت أرغب في إيقافه):

function Reset() {

    $formDiv.fadeOut(function() {

        while (!$(this).is(':animated')) {
            // perform reset actions here
        }

        $(this).fadeIn()
    });
}

لذلك لست متأكدًا حقًا من أين أذهب من هنا. سيكون موضع تقدير أي مساعدة. شكرًا.

Answer 1

واجهت نفس المشكلة مؤخرًا مع fadeOut يبدو أن هذا يعمل بشكل غير صحيح ، ووجدت الحل له:

$(this).animate({opacity:'0'},function(){

   //here changes to this element

   $(this).animate({opacity:'1'});
})

يبدو مثل Fadein/Fadeout ولكنه يعمل كما هو متوقع (يتم إجراء التغييرات بينما العنصر غير مرئي)

آمل أن يجد بعضكم مفيدًا.

Answer 2

يستخدم

jQuery.stop().fadeOut() 

لمنع طابور في طابور الرسوم المتحركة Fadeout.

.stop() can be used to prevent queueing any jQuery Animation 

http://api.jquery.com/stop/

Answer 3

لا ينبغي أن يطلق رد الاتصال حقًا حتى تكتمل الرسوم المتحركة. هل حاولت إعداد سرعة على Fadeout - الوثائق (التي ليست دقيقة دائمًا) تُظهرها كمعلمة مطلوبة وقد تكون فقط إذا قمت بتحديد رد اتصال - أي ، قد يكون تقييم الوظيفة كسرعة إذا لم تقم بتوفير واحدة بشكل صريح.

$formDiv.fadeOut('fast', function() {
    // perform reset
    $(this).fadeIn();
});

تعديل: بعد النظر في الكود ، يبدو (في 1.3.2 ، على الأقل) أنه إذا قمت بتوفير وظيفة كوسيطة أولى ، فسيقوم بتقييمها واستخدام قيمة الإرجاع كسرعة. إذا قمت بتحديد سرعة ، فيجب أن تعمل وظيفة رد الاتصال الخاصة بك كما تتوقع. يجب أن يتلاشى العنصر ، وسيتم إطلاق رد الاتصال ثم يتم إعادة تعيينك وتتلاشى في الكود.

Answer 4

تفحص .تأخير

مزيد من التفاصيل: حدد مقدار الوقت الذي ستستغرقه الرسوم المتحركة لـ Fadeout () ، واستخدام تأخير للرسوم المتحركة Fadein () التي تكون أطول من وقت الرسوم المتحركة Fadeout. في هذا المثال ، ستحدث إجراءات إعادة التعيين أثناء الرسوم المتحركة Fadeout ويفترض أنها لا تستغرق وقتًا أطول من 600 مللي ثانية.

$formDiv.fadeOut(600,function() {

    // perform reset actions here
    $(this).delay(650).fadeIn()
});

تحرير: عفوًا ، أسيء فهم المشكلة قليلاً. تريد أن يتم تشغيل منطق نموذج إعادة تعيين على مكالمة Fadein () ، وليس Fadeout. لكنني أعتقد أنه لا يزال من الجيد مزامنة أحداث الرسوم المتحركة. جرب شيئًا مثل:

$formDiv.fadeOut(600,function() {
    $(this).delay(650).fadeIn(function() {
        // perform reset actions here
    });
});