淡入淡出

在jQuery中，可以实现元素的淡入淡出效果。jQuery提供了四种fade方法：fadeIn()淡入已隐藏的元素、fadeOut()用于淡出可见的元素、fadeToggle()用于在fadeIn()和fadeOut()方法之间进行切换、fadeTo()允许渐变给定的不透明度（值介于0与1之间）

fadeIn()语法：$(selector).fadeIn(speed,callback);

fadeOut()语法：$(selector).fadeOut(speed,callback);

fadeToggle()的语法：$(selector).fadeToggle(speed,callback);

fadeTo()的语法：$(selector).fadeTo(speed,opacity,callback);

示例如下：

(1)描述

在示例中我们将把fade()的四种方法分别有不同参数是进行演示。

(2)代码实现

<script type="text/javascript">
$(function(){//fadeIn()方法
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
    });
})
$(function(){//fadeOut()方法
    $("button").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
    });
})
$(function(){//fadeToggle()方法
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
})
$(function(){//fadeTo()方法
    $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
    });
})
</script>
...省略代码
<button>点击这里，看效果</button>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>

<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>