jQuery 콜백은 페이드 아웃에서 기다리지 않습니다
문제
다음 코드는 다음과 같은 결과를 생성해야합니다.
mademoiselle
demoiselle
mesdemoiselles
대신, "ma"가 사라지면 "Mes"는 시퀀스를 만드는 데 사라집니다.
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>
문제는 다음과 같습니다. 내가해야한다면 str_replace 할 것입니다. 그러나 왜 이런 일이 일어나고 있는지 궁금합니다.
해결책
좋아, 그래서 나는 당신의 문제를 재현 할 수있었습니다. http://jsbin.com/ocaha.
일어나는 일은 jQuery가 비어있는 것을 볼 수 있다는 것입니다. <span>
사라질 필요는 없습니다. 따라서 완료된 애니메이션을 고려하고 예상 4000ms 대신 0ms를 실행합니다. 그래서 그것은 즉시 사라지기 시작합니다 모두 의 .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);
});
});
제휴하지 않습니다 StackOverflow