이미지가 더 느리게 페이드 아웃되도록 시도하지만 즉시 페이드 아웃되는 것처럼 보이며 새 이미지가로드되는 동안 공백이 남습니다.
HTML
<div class="fadein">
<!--<img src="images/me.jpg" alt="" /> -->
<img src="images/boatResized.jpg" alt="" />
<img src="images/carResized.jpg" alt="" />
<img src="images/dennis_stockRezied1.jpg" alt="" />
</div>
JS
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut(4500)
.next('img')
.fadeIn(5500)
.end()
.appendTo('.fadein');
}, 8000); // 8 seconds
나는 JS를 처음 접했고 올바르게 작동하는 데 문제가 있습니다.
주요 문제는에 대한 호출이 다른 요소에서 호출되기 때문에 완료 될 .fadeIn()때까지 기다리지 않는다는 것입니다 .fadeOut()(따라서 다른 애니메이션 대기열에 속함). 완료 콜백 함수를 두 번째 인수로 추가 한 .fadeOut()다음 .fadeIn()해당 함수 내에서 수행 할 수 있습니다.
또한 8 초 간격을 사용하고 있지만 페이드가 4.5 초와 5.5 초이므로 최대 10 초의 턴어라운드가 추가됩니다. 따라서 다음 코드에서 간격을 11로 늘 렸습니다. 가능한 한 코드를 거의 변경하지 않고이 작업을 수행했습니다.
setInterval(function () {
$('.fadein :first-child').fadeOut(4500, function() {
$(this).next('img')
.fadeIn(5500)
.end()
.appendTo('.fadein');
});
}, 11000);
데모 : http://jsfiddle.net/qh03e16s/
을 제거 setInterval()하고 대신 .fadeIn(). 그러면 첫 번째 페이드가 즉시 시작됨을 의미하지만 페이드 아웃 및 인에 추가되는 간격의 타이밍에 대해 걱정할 필요가 없습니다.
(function doFade() {
$('.fadein :first-child').fadeOut(4500, function() {
$(this).next('img')
.fadeIn(5500, doFade) // note the doFade reference
.end()
.appendTo('.fadein');
});
})();
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다