Обратный вызов jQuery, не ожидающий затухания

Question

Мне кажется, следующий код должен привести к этим результатам:

mademoiselle
demoiselle
mesdemoiselles

Вместо этого, когда "ма" затухает, "мес" затухает при создании последовательности:

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-код, генерирующий это, использует промежутки в качестве заполнителей.Я str_replace их, если понадобится, но мне любопытно, почему это происходит.

Answer 1

Хорошо, итак, мне удалось воспроизвести вашу проблему, смотрите пример по адресу http://jsbin.com/ocaha.

Что происходит, так это то, что jQuery может видеть, что ваш пустой <span> не нуждается в выцветании.Поэтому он считает анимацию выполненной и выполняется в течение 0 мс вместо ожидаемых 4000 мс.Таким образом, он сразу же начинает исчезать в ВСЕ из числа .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);
   });
});