如何添加一個簡單的過渡使用jquery

對不起，如果我是一個noob，我沒有與jquery（尚未）的經驗。我一直在看書，但我無法弄清楚如何增加這個過渡...如何添加一個簡單的過渡使用jquery

<script> 
$(function(ready){ 
$('select[id="options-1"]').change(function(){ 

if ($(this).val() == "1") 
    $('.preview-1').addClass("active").siblings().removeClass("active"); 

if ($(this).val() == "2") 
    $('.preview-2').addClass("active").siblings().removeClass("active"); 

if ($(this).val() == "3") 
    $('.preview-3').addClass("active").siblings().removeClass("active"); 

if ($(this).val() == "4") 
    $('.preview-4').addClass("active").siblings().removeClass("active"); 

if ($(this).val() == "5") 
    $('.preview-5').addClass("active").siblings().removeClass("active"); 

}); 
}); 
</script>

這個腳本會從下拉菜單中的值，並用它來改變圖像的類（用LI標籤包裹），使其可見：

<li id="preview-5869" class="preview-2"> 
<li id="preview-2388" class="preview-1 active">

'active'類使圖像可見。在上述兩行代碼中，類「預覽-1有效」的li標籤將可見。

我想要做的是做一個轉換，而不是立即改變圖片，會有一個很好的淡入淡出效果。你能幫我解決這個問題嗎？

在此先感謝。

來源

2012-08-03 huzibizi

http://api.jquery.com/category/effects/fading/ – 2012-08-03 01:47:02

沒有直接關係，但你可以清理你的代碼：'$（ '.preview-'+ this.value）.addClass（「active」）'。並使用一個id選擇器，而不是一個屬性選擇器。 – Dennis 2012-08-03 01:50:01

你可以用jQuery的fadeIn和fadeOut函數來做到這一點。這是我如何創造這種效果的例子。請記住，您不能拖慢刪除類名或添加新類名的過程。所以你需要首先fadeOut所有可見的元素，然後fadeIn已被選中。這裏是我的我是如何實現這個例子：

http://jsfiddle.net/sarcastyx/Xhu4x/

來源

2012-08-03 05:25:38 sarcastyx

如何添加一個簡單的過渡使用jquery

回答

相關問題