Javascript 如何使用jQuery在不同时间淡入淡出图像

我有两个不同的图像分类（信纸和手文件）。我希望一个淡出，另一个淡入，并继续这样下去

这就是我所拥有的，但它同时也在淡化图像：

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

有什么建议吗？

像这样的建议

---

您有一个问题，因为在第一次迭代之后，它将同时显示这两个项目，并从那时起切换状态，即可见或不可见。你也可以摆脱超时等，使它更通用

为你的图像（或div或你正在使用的任何东西）提供一个公共类

.slide {
    opacity:0;
    animation: fadeInOut 2s infinite;
}
.letterfile{
    animation-delay: 1s;
}
@keyframes fadeInOut{
    0%{ opacity:0;}
    50%{opacity:1;}
    100%{ opacity:0;}
}

---

大多数动画方法都有一个复杂的回调函数，当一个动画完成时，该函数将被执行。准确地说，在你的情况下，这就是你想要开始下一个fadeTransition的地方。

我知道这并不完全是你想要的，但值得一提的是，你可以使用css来实现同样的效果

.slide {
    opacity:0;
    animation: fadeInOut 2s infinite;
}
.letterfile{
    animation-delay: 1s;
}
@keyframes fadeInOut{
    0%{ opacity:0;}
    50%{opacity:1;}
    100%{ opacity:0;}
}

---

这里是一个简化的解决方案，简要的解释，和工作小提琴。所有jQuery动画都放在一个动画

队列中

，这就像一条进入商店的线，或者在本例中是要执行的线。我们不希望动画排成一行，我们希望它们同时执行，因此我们传入一个options对象，该对象的状态为

queue:false

。我们还利用了

fadeToggle

。此jQuery方法通过将不透明度逐步设置为0，然后使用

display:none

对其进行样式设置来淡入淡出，如果它已经有

display:none

，它将淡入淡出。我们在HTML中利用了这一点

还要注意的是，您需要确保并设置一个持续时间，允许动画在再次被间隔调用之前完全发生，如果不这样做，这将破坏一切

HTML 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();
});

.slide {
    opacity:0;
    animation: fadeInOut 2s infinite;
}
.letterfile{
    animation-delay: 1s;
}
@keyframes fadeInOut{
    0%{ opacity:0;}
    50%{opacity:1;}
    100%{ opacity:0;}
}

<div class="letterfile"></div>
<div class="handfile" style="display:none"></div>

div {
    width: 200px;
    height: 200px;
    position: absolute;
}
.letterfile {
    background-color: black;
}
.handfile {
    background-color: gold;
}

setInterval(function(){
    $('.handfile, .letterfile').fadeToggle({
        queue: false,
        duration: 1250
    });
}, 2500);