2012-08-03 73 views
1

对不起,如果我是一个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标签将可见。

我想要做的是做一个转换,而不是立即改变图片,会有一个很好的淡入淡出效果。你能帮我解决这个问题吗?

在此先感谢。

+1

http://api.jquery.com/category/effects/fading/ – 2012-08-03 01:47:02

+0

没有直接关系,但你可以清理你的代码:'$( '.preview-'+ this.value).addClass(“active”)'。并使用一个id选择器,而不是一个属性选择器。 – Dennis 2012-08-03 01:50:01

回答

0

你可以用jQuery的fadeInfadeOut函数来做到这一点。这是我如何创造这种效果的例子。请记住,您不能拖慢删除类名或添加新类名的过程。所以你需要首先fadeOut所有可见的元素,然后fadeIn已被选中。这里是我的我是如何实现这个例子:

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