jQuery在容器中淡入淡出，並在下一個容器中淡入淡出

Question

我不知道是否有任何方式（使用jQuery）獲得與頁面相同的效果 - 客戶需要相同的效果，但在jQuery中（這是在actionscript中 - http://www.shoppingmetropolitanobarra.com.br/site/web/lojas.php）。

我試圖變成一個jQuery代碼，但沒有成功：

http://jsfiddle.net/pq667/2/

會有幾個容器，每使用jQuery animate方法多個縮略圖，即完成了一個容器，應使用fadeOut效果和fadeIn下一個容器（發生在頁面加載時）。

有什麼建議嗎？

Answer 1

瀏覽器有一個在我的例子http://jsfiddle.net/qEAJu/20/，如果要達到這個效果變焦使用this plugin爲CSS過渡考慮。

Answer 2

您需要使用定位發揮，因爲你會看到，但確實在，延遲淡入，淡出，你問的...

http://jsfiddle.net/pq667/11/

這是一個簡單的在第一個動畫之後添加另一個延遲的情況，然後另一個動畫以做相反的動作。

我會推薦將它們全部定位在一個相對定位的容器中，並將位置（左側&頂部）以及寬度和高度設置爲動畫。

Answer 3

我經常從http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/更改此片段。通過任意jQuery對象上自動執行的回調鏈：temp01

(function hidenext(jq){ 
    jq.eq(0).fadeOut("fast", function(){ 
     (jq=jq.slice(1)).length && hidenext(jq); 
    }); 
})($('div#bodyContent a')); 

你可以改變什麼上面是這樣的：

$('.block').hide(); 

(function showNext(ele){ 
    ele.eq(0).fadeIn('slow', function(){ 
     (ele=ele.slice(1)).length && showNext(ele); 
    }); 
})($('.block'))​ 

這裏有一個的jsfiddle我設置爲顯示你的可能性：http://jsfiddle.net/hqgVS/

Answer 4

這個確切的效果只能用於CSS3轉換。 原因是文本的縮放。你當然可以通過改變元素的大小甚至字體來僞造它，但是很難達到預期的效果。

例如：

的jQuery：

$('li').each(function(i, el) { 
    setTimeout(function() { 
     $(el).addClass('show'); 
    }, ($('li').length - i) * 500); 
});​ 

CSS：

li.show{ 
    -webkit-transition:all 1s ease-out; 
    opacity:1; 
    -webkit-transform:scale(1); 
} 

演示： http://jsfiddle.net/6xL7R/
（查看WebKit的瀏覽器，如Chrome瀏覽器，因爲我省略了其他供應商前綴）

---

你可以使用jQuery做的不透明度動畫，但：

的jQuery：

$('li').css({'opacity':0}).each(function(i,el){ 
    $(el).delay(($('li').length-i)*500).animate({'opacity':1},1000); 
}); 

（在我的小提琴評論部分）

也許這兩者的組合會爲你解決？ 在兼容的瀏覽器上顯示比例。

或檢查與http://modernizr.com/