javascript - 如何使用 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 标记中)，使其可见:

<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/