如何使用jquery添加简单的转换

Question

如果我是新手，很抱歉，我对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 id="preview-5869" class="preview-2">
<li id="preview-2388" class="preview-1 active">

“active”类使图像可见。在上面的两行代码中，可以看到带有类'preview-1 active‘的li标记。

我想做的是做一个过渡，而不是立即改变图片，将有一个很好的淡入淡出效果。你们能帮我个忙吗？

提前谢谢。

Answer 1

您可以使用jQuery的fadeIn和fadeOut函数来实现这一点。这是我如何创建这种效果的示例。请记住，您不能减慢删除类名或添加新类名的过程。因此，您需要首先对当前可见的所有元素执行fadeOut操作，然后对已选择的元素执行fadeIn操作。以下是我如何实现这一点的示例：

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