如何将淡入添加到此 jQuery 功能？

Question

我已经编写了以下代码来更改背景图像，但我还想为其设置动画以淡出旧幻灯片并淡入新幻灯片。问题是，我真的不知道如何才能做到这一点...有什么想法吗？

$(document).ready(function () {
        var slideshow = $(".slideshow");
        var slides = new Array("url(../images/slideshow/fota1.jpg)","url(../images/slideshow/fota2.jpg)");
        var current = 0;

    function nextSlide() {
        slideshow.css("background",slides[current = ++current % slides.length]);

        setTimeout(nextSlide, 5000);
    }
    setTimeout(nextSlide, 5000);
    slideshow.css("background", slides[0]);
});

Answer 1

您可以使用jquery的fadeOut()和fadeIn()函数来完成这种动画。只需在 fadeOut 回调中设置背景图像，以便动画按顺序排队：

$(function(){

    var slideshow = $('.slideshow'),
        slides = new Array('url(http://placehold.it/350x150)', 'url(http://placehold.it/350x150/250)'),
        current = 0;    

    function nextSlide(){
        // fade out, with callback
        slideshow.fadeOut(800, function(){
            slideshow.css('background',slides[current = ++current % slides.length]);
        });
        //fade in 
        slideshow.fadeIn(800);
    }

    setTimeout(nextSlide, 5000);
    slideshow.css('background', slides[0]);
});

还有一个工作片段：

$(function(){
    
    var slideshow = $('.slideshow'),
        slides = new Array('url(http://placehold.it/350x150)', 'url(http://placehold.it/350x150/250)'),
        current = 0; 
    
    function nextSlide(){
     slideshow.fadeOut(800, function(){
         slideshow.css('background',slides[current = ++current % slides.length]);
        });
        slideshow.fadeIn(800);
    }
    
    setTimeout(nextSlide, 5000);
    slideshow.css('background', slides[0]);
});

div{
    height: 150px;
    width: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow"></div>

如何将淡入添加到此 jQuery 功能？

How to add fade in to this jQuery function?

jquery

background

slideshow