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

抱歉，如果我是一个noob，我还没有那么丰富的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>

$（功能（就绪）{
$（'select[id=“options-1”]”）。更改（函数（）{
如果（$（this.val（）=“1”）
$（'.preview-1'）.addClass（“活动”）.sides（）.removeClass（“活动”）；
如果（$（this.val（）=“2”）
$（'.preview-2'）.addClass（“活动”）.sides（）.removeClass（“活动”）；
如果（$（this.val（）=“3”）
$（'.preview-3'）.addClass（“活动”）.sides（）.removeClass（“活动”）；
如果（$（this.val（）=“4”）
$（'.preview-4'）.addClass（“活动”）.sides（）.removeClass（“活动”）；
如果（$（this.val（）=“5”）
$（'.preview-5'）.addClass（“活动”）.sides（）.removeClass（“活动”）；
});
});

此脚本从下拉菜单中获取值，并使用该值更改图像（包装在LI标记中）上的类，从而使其可见：

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

类“active”使图像可见。在上面的两行代码中，类为“preview-1 active”的li标记将可见

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

---

提前感谢。

您可以使用jQuery的

fadeIn

和

fadeOut

功能来实现这一点。这是我如何创造这种效果的例子。请记住，您不能减慢删除类名或添加新类名的过程。因此，您需要首先将当前可见的所有元素

fadeOut

，然后将已选择的元素

fadeIn

。以下是我如何实现这一目标的示例：

---

没有直接关系，但您可以清理代码：

$（'.preview-'+this.value）。addClass（“active”）

。并使用id选择器而不是属性选择器。