Обратный вызов jQuery, не ожидающий затухания
Вопрос
Мне кажется, следующий код должен привести к этим результатам:
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 их, если понадобится, но мне любопытно, почему это происходит.
Решение
Хорошо, итак, мне удалось воспроизвести вашу проблему, смотрите пример по адресу 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.
Другие советы
Изменение ":пустой" чтобы ":скрытый" если не работает:
$(document).ready(function() {
$(".remove")
.filter(function(){ return ! $(this).is(":hidden"); })
.fadeOut(4000, function(){
$(".add").fadeIn(5000);
});
});