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左右，我的元素滾動到屏幕的中心，但它是很容易谷歌如果這就是你所追求的，那也是一個解決方案。