jQuery - 如何为此滑块创建平滑效果？

Question

我有一个滑块，它有一个比其他更大的活动项目。单击控件时，下一个/上一个项目将获得活动类。它正在工作，但我想为此添加一个平滑的效果。有什么想法吗？

代码：

$('#next').click(function(){
    $('#wrap').find('.active').removeClass('active').next().addClass('active');
    $('#wrap img:first').remove().appendTo('#wrap');
});

$('#prev').click(function(){
    $('#wrap').find('.active').removeClass('active').prev().addClass('active');
    $('#wrap img:last').remove().prependTo('#wrap');
});

示例：http://jsfiddle.net/zXjzU/1/

谢谢！

Answer 1

我不确定您将什么定义为“平滑”效果，但考虑到您现有的代码，一个非常简单的解决方案是在您的 #wrap img CSS 中添加一个 transition:width 1s。 See JSFiddle:

#wrap img {
    width: 100px;
    clear: both;
    margin: 0 5px 30px 5px;
    transition:width 1s;
}

我不确定我会构建这样的轮播，我可能会使用positions 以​​便我的元素滚动到屏幕中心，但这很容易如果这就是你所追求的，谷歌也有一个解决方案。