jQuery Domino像滑塊插件

Question

我正在尋找一個基於jQuery的內容滑塊插件。 我不是說這樣的人 （數量太多）也不是jQueryUI滑塊 。 我所尋找的東西最好用圖片來描述。

是否有一個jQuery插件，允許我從視口滑動（或過渡）某些元素並在其位置滑動新元素？ 理想情況下，我希望能夠（幾個）系列簡化幾個元素，然后再放回到頁面上，而不是一個接一個。 減輕這些元素的能力，而不是以線性速度滑動它們，真是太棒了。

這張圖片是我能想到的最好的視覺效果：

我知道我可以像以前做過的一樣開發一個插件，但是如果可能的話，我想避免重新發明輪子。 誰能推薦一個插件？

感謝您的時間。

Answer 1

如果您支持CSS3，則可以嘗試執行類似的操作，但是最好建立一個動畫類。

.item:nth-child(1)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.35s;
}

item:nth-child(2)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.55s;
}

.item:nth-child(3)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.65s;
}

.item:nth-child(4)
{
transition-timing-function            : ease-in-out;       
transition-property                    : left;
transition-duration                    : 0.1s;
transition-delay                    : 0.75s;
}​

如果您想使用jQuery，我在http://api.jquery.com/queue/上已經取得了一些成功，這將使您能夠制作更復雜的鏈接動畫。 對於未知數量的孩子，您可以使用slice()方法。

我更改了http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/中找到的此自執行代碼段

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

您不必使用fadeOut ，也不需要自我執行，但這是對未知數量的元素應用“過渡”的一種整潔方法。

這是使用fadeOut的小提琴http://jsfiddle.net/NpBfJ/ ...這可能比您想要的還要多... :-)

關於滑塊，這是最好的免費滑塊之一，它具有許多可自定義的功能， 網址為http://caroufredsel.dev7studios.com/ 。