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/ 。