8

我正在寻找一个基于 jQuery 的内容滑块插件。我的意思不是这样的（其中太多了），也不是jQueryUI 滑块。我正在寻找的东西可以用图片来最好地描述。

是否有一个 jQuery 插件允许我将某些元素滑出（或转换）视口并在其位置滑动新元素？理想情况下，我希望能够以（某种）系列的形式将几个元素从页面上移开并放回页面，而不是一个接一个。缓和这些元素的能力，而不是以线性速度滑动它们，将是非常棒的。

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

在此处输入图像描述

我知道我可以开发一个插件，就像我以前做过几个一样，但如果可能的话，我想避免重新发明轮子。谁能推荐一个插件？

感谢您的时间。

4

1 回答 1

4

如果你支持 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它，也不需要自动执行，但它是一种将“过渡”应用于未知数量元素的整洁方式。

这是一个使用淡出http://jsfiddle.net/NpBfJ/的小提琴...这可能比您想要的要多...:-)

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

于 2012-12-20T21:01:38.150 回答