jQuery .Animate不透明度和.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/

从上方的小提琴中可以看出，这通常是可行的。 但是，它似乎忽略了动画的长度。 使用.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);

小提琴