JQuery淡入淡出

我被賦予了將Flash動畫轉換爲JQuery的任務。這是我想讓我的jquery代碼做的，這裏是Flash動畫：http://www.thedesigncommonwealth.com/durangoSlideshow.html。JQuery淡入淡出

這是我的jQuery的樣子至今：http://www.lisa.netii.net/test-for-durango.html

我工作的左側第一，只是試圖讓這移動在對方之前正常工作，時機之間非常重要的雙方，我認爲我的代碼到目前爲止可能能夠處理。查看Jquery版本時有幾個明顯的問題。首先，我遇到了fadeIn效應的問題。即使使用.hide效果，除第一個圖像之外的所有圖像都會彈出到屏幕上。我曾嘗試在每個div的每個Jquery函數行中使用.hide，它似乎只適用於第一個圖像，所有其他圖像仍然會彈出到屏幕上。

第一張幻燈片也有問題。目前在html中的＃slide2應該是slide1，但由於某些原因，動畫開始在slide2上運行，而＃slide1沒有任何反應，所以我將＃slide1更改爲＃slide2，但這顯然不是一個很好的解決方法。我可以一次採取這一步...

任何人都可以告訴我我能做些什麼來解決淡入問題嗎？這裏是我的jQuery代碼：

$("#slide1").hide().fadeIn(200).delay(3000).fadeOut(4000); 
var t2 = setTimeout(function(){ 
    $("#slide2").hide().fadeIn(4000).delay(5000).fadeOut(4000); 
    var t3 = setTimeout(function(){ 
     $("#slide3").hide().fadeIn(4000).delay(10000).fadeOut(4000); 
     var t4 = setTimeout(function(){ 
      $("#slide4").hide().fadeIn(4000).delay(5000).fadeOut(4000); 
      var t5 = setTimeout(function(){   
       $("#slide5").hide().fadeIn(4000); 
      }, 6500); 
     }, 11500); 
    }, 6500); 
}, 6500);

查看CSS和HTML看到jQuery的網站鏈接。

非常感謝您的幫助！

來源

2011-04-22 Jenny

試試這個：

var numberOfImages = 5; 
var fadeInSpeed = 200; 
var fadeOutSpeed = 200; 
var pause = 6500; 

function startSlideImage(index) { 
    jQuery('#slide'+index).hide().fadeIn(200, function(){ 
     jQuery(this).delay(3000).fadeOut(fadeOutSpeed, function(){ 
     setTimeout(function(){ 
      startSlideImage(index+1); 
     }, pause); 
     }); 
    }); 
} 

startSlideImage(1);

要添加不同的延時時間，你可以把這些數據寫入到像一個類屬性：

<div id="slide1" class="delay-3000">...</div>

或任何其他屬性未使用和W3C -konform。但在我看來，班級屬性是最好的。如果class-Attribute具有其他值，則可以用空格.split（''）分割它並捕獲該索引。

之後，你可以讀出與延遲：

var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10);

所以，你的功能應該是這個樣子：

function startSlideImage(index) { 
    jQuery('#slide'+index).hide().fadeIn(200, function(){ 
     var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10); 
     jQuery(this).delay(delay).fadeOut(fadeOutSpeed, function(){ 
     setTimeout(function(){ 
      startSlideImage(index+1); 
     }, pause); 
     }); 
    }); 
}

來源

2011-04-22 14:01:46

我需要能夠在每個格添加不同的延遲值/滑動。我不確定在這個例子中我該如何做到這一點。也許如果有解釋上面的代碼...？謝謝Richarz。 – Jenny 2011-04-22 14:55:13

看我上面的編輯 – 2011-04-22 20:53:45

JQuery淡入淡出

回答

相關問題