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 CSS中添加#wrap img。 See JSFiddle：

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

我不确定我构建这样的旋转木马，我可能会使用position s以便我的元素滚动到屏幕的中心，但它很漂亮如果这就是你所追求的，那么Google也很容易找到解决方案。

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

1 个答案: