jQuery .Animate不透明度和.FadeOut /兩者都不工作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); 

FIDDLE