javascript - 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

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

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

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