javascript - 如何使用 jQuery 在不同时间淡入图像

Question

我有两个不同的分类图像(letterfile 和 handfile)。我希望其中一个淡出，而另一个淡入，并继续这样下去。

这就是我所拥有的，但它同时使图像褪色:

$( document ).ready(function() {
   setInterval(function() {
   $( ".letterfile" ).fadeToggle( "slow", "linear" );
   setTimeout(function(){
       $( ".handfile" ).fadeToggle( "slow", "linear" );
       }, 2000);
   }, 2000);
});

有什么建议吗？

Answer 1

您遇到了一个问题，因为在第一次迭代之后，它将同时显示它们，并从那里开始切换状态，即可见或不可见。您还可以摆脱超时等并使其更加通用。

为您的图像(或 div 或您正在使用的任何内容)提供一个通用类

<img class="letterfile slide" src="http://placehold.it/100x100" />
<img class="handfile slide" src="http://placehold.it/200x200" />

JS

$(document).ready(function () {
    var duration = 'slow', type="linear";
    function toggleEM() {
        //Get the visible slide and after 2 sec start fade out transition
        $('.slide:visible').delay(2000).fadeOut(duration, type, function(){
            //once this is complete slide in the next one, i.e a sibling of this image
            $(this).siblings('.slide').fadeIn(duration, type, function(){
                  toggleEM(); //after that is completed start the loop again
            });
        })
    }
    toggleEM();
});

<强> Demo

大多数动画方法都有一个完整的回调，该回调将在一个动画完成时执行，并且在您想要开始下一个 fadeTransition 的情况下正是如此。