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的情况。

Answer 2

这样的东西？

http://jsfiddle.net/RqXxn/1/

$(document).ready(function() {
   showLetter();
});

function showLetter() {
    $( ".letterfile" ).fadeToggle( "slow", "linear", function() {
       showHand(); 
    });
}

function showHand() {
    $( ".handfile" ).fadeToggle( "slow", "linear", function() {
       showLetter(); 
    });    
}

Answer 3

我知道它并不完全是你所要求的，但值得一提的是你可以用css keyframes来达到同样的效果。

<强> Working Example

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

Answer 4

这是一个简化的解决方案，简要说明和工作小提琴。所有jQuery动画都放在一个动画queue上，这就像一行进入商店，或者在这种情况下被执行。我们不希望动画排成一行，我们希望它们同时执行，因此我们传入一个指示queue: false的选项对象。我们还利用了fadeToggle。这个jQuery方法通过将不透明度变为0然后使用display: none设置样式来淡化某些内容，如果它已经有display:none它将淡入它。我们在HTML中利用它。

另请注意，您需要确保并设置一个持续时间，允许动画完全发生，然后再按间隔再次调用，如果不这样做，将会破坏。

Working Fiddle

HTML

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

CSS

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

JS

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

祝你好运！

如何使用jQuery在不同时间淡化图像

4 个答案:

HTML

CSS

JS