jQuery Domino Like Slider Plugin

Question

我正在寻找一个基于jQuery的内容滑块插件。我不是指this（其中有太多）和jQueryUI slider之类的。我正在寻找的内容最好在图片中描述。

是否有一个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/它有许多可自定义的功能。