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 img CSS。 See JSFiddle：

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

我不知道那我倒是构建一个旋转木马这样的，我可能会使用position S左右，我的元素滚动到屏幕的中心，但它是很容易谷歌如果这就是你所追求的，那也是一个解决方案。