如何添加一个简单的过渡使用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

回答

相关问题