jQuery Domino Like Slider Plugin

Question

我正在寻找一个基于jQuery的内容滑块插件.我不是指这样的(其中有太多太多)和jQueryUI滑块.我正在寻找的东西最好在图片中描述.

是否有一个jQuery插件允许我从视口滑动(或转换)某些元素并在其位置滑动新元素？理想情况下,我希望能够在(一系列)系列中关闭和返回页面上的几个元素,而不是一个接一个.放松这些元素而不是以线性速度滑动它们的能力将是非常棒的.

这张照片是我能想到的最好的视觉效果:

我知道我可以开发一个插件,就像之前我做过的那样,但如果可能的话,我想避免重新发明轮子.任何人都可以建议一个插件？

感谢您的时间.

Answer 1

如果你支持CSS3，你可以尝试做这样的事情，尽管构建一个动画类可能更好。

\n\n

.item:nth-child(1)\n{\ntransition-timing-function            : ease-in-out;       \ntransition-property                    : left;\ntransition-duration                    : 0.1s;\ntransition-delay                    : 0.35s;\n}\n\nitem:nth-child(2)\n{\ntransition-timing-function            : ease-in-out;       \ntransition-property                    : left;\ntransition-duration                    : 0.1s;\ntransition-delay                    : 0.55s;\n}\n\n.item:nth-child(3)\n{\ntransition-timing-function            : ease-in-out;       \ntransition-property                    : left;\ntransition-duration                    : 0.1s;\ntransition-delay                    : 0.65s;\n}\n\n.item:nth-child(4)\n{\ntransition-timing-function            : ease-in-out;       \ntransition-property                    : left;\ntransition-duration                    : 0.1s;\ntransition-delay                    : 0.75s;\n}\xe2\x80\x8b\n

\n\n

如果您想使用 jQuery，我在http://api.jquery.com/queue/上取得了一些成功，这将允许您制作更复杂的链式动画。对于未知数量的孩子，您可以使用该slice()方法。

\n\n

我已经更改了在http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/上找到的自执行代码片段

\n\n

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

\n\n

您不必使用fadeOut它，也不需要自动执行，但它是将“转换”应用于未知数量的元素的简洁方式。

\n\n

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

\n\n

关于滑块，这是最好的免费滑块之一http://caroufredsel.dev7studios.com/它有许多可定制的功能。

\n