javascript - jQuery .Animate Opacity 和 .FadeOut/In 都不能在 SetInterval 中工作

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/

如上面的 Fiddle 所示，这主要是有效的。但是，它似乎忽略了动画的长度。使用 .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