رد الاتصال jQuery لا تنتظر fadeout

Question

يبدو لي أن التعليمات البرمجية التالية يجب أن تنتج هذه النتائج:

mademoiselle
demoiselle
mesdemoiselles

بدلا من ذلك، كما يتلاشى "MA"، يتلاشى "ميس" في جعل التسلسل:

mademoiselle
madesdemoiselles
mesdemoiselles

الرمز:

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="add">s</span>

$(document).ready(function() {
   $(".remove").fadeOut(4000,function(){
       $(".add").fadeIn(5000);      
   });
});

تحرير: لقد وجدت تمتد فارغة أنه إذا قمت بإزالته يجعل الخطأ يذهب بعيدا:

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="remove"></span><span class="add">s</span>

المشكلة هي: رمز PHP الذي يولد هذا يستخدم يمتد كمنتجات الأنسجة. سأطرحهم إذا كان علي ذلك، لكنني فضولي لماذا يحدث هذا.

Answer 1

حسنا، لذلك تمكنت من إعادة إنتاج مشكلتك انظر المثال في http://jsbin.com/ocaha..

ما يحدث هو أن JQuery يمكن أن يرى ذلك فارغة <span> لا يحتاج إلى تلاشى. لذلك فإنه يعتبر الرسوم المتحركة تم تنفيذها وتنفذها مقابل 0 ساعة بدلا من 4000ms المتوقع. لذلك يبدأ على الفور يتلاشى في الكل التابع .adds.

لمنع هذا السلوك، أود منقي بعيدا كل العناصر الفارغة من الاختيار. مثله:

$(document).ready(function() {
   $(".remove")
               .filter(function(){ return ! $(this).is(":empty"); })
               .fadeOut(4000, function(){
     $(".add").fadeIn(5000);
   });
});

انظر مثال العمل في http://jsbin.com/ovivi..

Answer 2

يتغيرون ":فارغة" ل ":مختفي"إذا لم تعمل:

$(document).ready(function() {
   $(".remove")
               .filter(function(){ return ! $(this).is(":hidden"); })
               .fadeOut(4000, function(){
     $(".add").fadeIn(5000);
   });
});