jQuery animating عناصر متعددة

Question

أحاول القيام بما يلي:

لدي مجموعتان من عناصر DOM على الصفحة. جميع العناصر في المجموعة الأولى تحمل الفصل display-element, ، والمجموعة الثانية من العناصر تحمل الفصل edit-element.

الآن لدي زر (معرف =edit-button). عندما أقدم هذا الزر، أريد كل شيء display-elements للتلاشي، وكل edit-elements لتظهر.

فعلت بشكل طبيعي:

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    });
});

لقد وجدت مفاجأة أن هذا لا يعمل كما هو متوقع. هذا ما حدث: بمجرد العنصر الأول مع الفصل display-element تلاشى، كل edit-elements بدأ يتلاشى في.

الآن هل هناك أي طريقة سهلة (ربما شيء في الوثائق التي فاتنيها) باستخدام ما يمكنني الحصول على كل edit-elements بدء يتلاشى في فقط بعد كل شيء display-elements لقد تلاشت؟

شكرا
جاهة

Answer 1

لماذا يحدث هذا، حقا؟ أقصد، يبدو أنك بدأت الرسوم المتحركة في نفس الوقت (هناك مكالمة واحدة فقط .fadeOut بعد كل شيء، أليس كذلك؟). أعتقد أن هذا لأن $ () ينتج عن صفيف وعند الاتصال به .fadeOut, ، jQuery تكرار من خلال مجموعة وأداء مهما كان أدائها لكل عنصر من عناصرها. بدءا من الأول. نظرا لأن رد الاتصال "مرفق" لكل رسوم متحركة، فإنك ترى التأثير المرئي للاتصال الأول.

أعتقد، يمكنك تجنب ذلك من خلال التكرار من خلال مجموعة من العناصر التي تم إرجاعها بنفسك وتأكد، أن تقوم بإرفاق رد الاتصال فقط إلى آخر واحد.

$('#edit-button').click(function(){
    var display_elements = $('.display-element');
    var len = display_elements.length;
    for (var i = 0; i < len-1; i++) {
        $(display_elements[i]).fadeOut(300); // no callback
    }
    $(display_elements[len-1]).fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    }); // last element - attach callback
});

أنا آسف إذا كان الرمز إيقاف تشغيله، يجب أن أعترف أن جافا سكريبت فو ليست قوية جدا :)

Answer 2

حسنا، لم يتم العثور على أي طريقة "Nifty API"، لقد قررت ذلك:

$('#edit-button').click(function() {
    var displays = $('.display-element');
    var counter = 0;
    var max = displays.length;
    displays.fadeOut(300, function() {
        counter++;
        if( counter>=max ) $('.input-element').fadeIn(300);
    }
});

هذا هو في الأساس @ إجابة shylent، مع المزيد من "جافا سكريبت فو" :)

Answer 3

الحل هو استخدام settimeout على التبشير في وظيفة

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300);
setTimeout("$('.edit-element').fadeIn(300);", 300);
});

ستؤدي وظيفة JavaScript إلى تأخير الزناد للاتخلاط في وظيفة 300 ميلاسيون

Answer 4

لقد ركضت مجرد مشكلة مماثلة وجدت خيار رد الاتصال "الخطوة" أسفر عن السلوك المطلوب.

الخطوة: وظيفة يجب استدعاؤها بعد كل خطوة من الرسوم المتحركة.

^ http://api.jquery.com/animate/

قم بالتمرير لأسفل إلى العرض التوضيحي لاستخدام الخطوة وسترى كيف ستمكنك من الاتصال بالتحريك على كائن واحد ثم استخدم الخطوة لتحديث بقية الإعداد في كل خطوة من خطوة الرسوم المتحركة. بهذه الطريقة لديك فقط رد اتصال واحد عند اكتمال الرسوم المتحركة.