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

How to add a simple transition using jquery

本文关键字：一个 简单 转换 何使用 jquery 添加      更新时间：2023-09-26

很抱歉，如果我是一个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>

这个脚本从下拉菜单中获取值，并使用它来更改图像上的类（包装在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已选定的元素。以下是我如何做到这一点的例子：

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

相关文章：