2

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

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

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

有什么建议么？

4

4 回答 4

2

你有一个问题，因为在第一次迭代之后它会一起显示它们，然后从那里切换状态，即可见或不可见。您还可以摆脱超时等并使其更通用。

为您的图像（或 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();
});

演示

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

于 2013-10-06T20:44:00.023 回答
0

像这样的东西？

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(); 
    });    
}
于 2013-10-06T20:40:04.143 回答
0

我知道它并不完全符合您的要求，但值得一提的是，您可以使用 css关键帧来实现相同的效果。

工作示例

.slide {
    opacity:0;
    animation: fadeInOut 2s infinite;
}
.letterfile{
    animation-delay: 1s;
}
@keyframes fadeInOut{
    0%{ opacity:0;}
    50%{opacity:1;}
    100%{ opacity:0;}
}
于 2013-10-06T21:15:14.213 回答
0

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

另请注意，您需要确保并设置一个持续时间，以允许动画在被间隔再次调用之前完全发生，如果不这样做会破坏事情。

工作小提琴

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);

祝你好运！

于 2013-10-10T12:21:26.077 回答