Question

我试图让用户看起来像是一个图像推子。一串图像相互淡入淡出。我发现的所有解决方案都很复杂，通常每个图像都需要一个。我想出了一个简单的解决方案。它在Windows上的Firefox / Chrome / IE11上工作了90％。在Android Chrome上，它存在问题。

基本上我的想法是，我有两个div，绝对定位，一个在另一个之上。两者都以背景开始，大小适合覆盖。顶部淡出，露出底部，并在动画结束时，顶部的一个（当前隐藏）的背景图像变为图像3.暂停后，它淡入，并且背景 - 底部的图像更改为图像4.这将无限重复。

HTML：

<div class="slideshow" id="slideshow-top"></div>
<div class="slideshow" id="slideshow-bottom"></div>

CSS：

.slideshow {
    display:block;
    background-size:cover;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
}
#slideshow-top {
    z-index:-5;
    background-image:url(http://www.andymercer.net/wp-content/uploads/2013/12/slider-1.jpg);
}
#slideshow-bottom {
    z-index:-10;
    background-image:url(http://www.andymercer.net/wp-content/uploads/2013/12/slider-2.jpg);
}

使用Javascript：

var url_array = [
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-1.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-2.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-3.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-4.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-5.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-6.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-7.jpg',
    'http://www.walldoze.com/images/full/2013/12/04/wallpapers-desktop-winter-nature-x-wallpaper-backgrounds-natureabstract-designs-interesting-hd-19045.jpg'
];
var count = 1;

setInterval(function() {

    if (count%2) { // Fade In

        jQuery('#slideshow-top').animate({opacity:0}, '200000', function() {

            jQuery('#slideshow-top').css('background-image','url('+url_array[count]+')');

        });

    }

    else {  //Fade Out

        jQuery('#slideshow-top').animate({opacity:1}, '200', function() {

            jQuery('#slideshow-bottom').css('background-image','url('+url_array[count]+')');

        });
    }

    count = (count == url_array.length-1 ? 0 : count + 1);

}, 2000);

http://jsfiddle.net/5eXy9/

如上面的小提琴所示，这主要是有效的。但是，它似乎忽略了动画的长度。使用.fadeOut具有相同的效果。我试过从200到20000，似乎没有区别。

我不确定这是否与另一个问题相关，即在Android（Galaxy S4，Chrome，Android 4.x）上，动画根本不会发生。它只是改变图像。有什么想法吗？

编辑：1月10日 - 时间问题已修复，但主要问题（Android）仍未解决。有什么想法吗？

Answer 1

间隔保持不变，因此在提高动画速度时，您也可以增加间隔速度你构建它的方式，你应该始终保持两个动画的速度等于间隔，或者如果你需要一个延迟，增加与动画相比的间隔，所以它至少有一个高于最大数字的数字动画。

改变速度的原因根本不起作用，因为它应该是整数，而不是字符串，所以你必须这样做

jQuery('#slideshow-top').animate({opacity:0}, 200000, function() {...
 //                                             ^^  no quotes

我会做这样的事情

var url_array = [
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-1.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-2.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-3.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-4.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-5.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-6.jpg',
    'http://www.andymercer.net/wp-content/uploads/2013/12/slider-7.jpg',
    'http://www.walldoze.com/images/full/2013/12/04/wallpapers-desktop-winter-nature-x-wallpaper-backgrounds-natureabstract-designs-interesting-hd-19045.jpg'];
var count = 1;

var speed = 2000,
    delay = 1000;

$.each(url_array, function(source) { // preload
    var img = new Image();
    img.src = source;
});


setInterval(function () {
    if (count % 2) { // Fade In
        jQuery('#slideshow-top').animate({
            opacity: 0
        }, speed, function () {
            jQuery('#slideshow-top').css('background-image', 'url(' + url_array[count] + ')');
        });

    } else { //Fade Out

        jQuery('#slideshow-top').animate({
            opacity: 1
        }, speed, function () {
            jQuery('#slideshow-bottom').css('background-image', 'url(' + url_array[count] + ')');
        });
    }
    count = (count == url_array.length - 1 ? 0 : count + 1);
}, speed + delay);

FIDDLE

jQuery .Animate Opacity和.FadeOut / In都不能在SetInterval里面工作

1 个答案: