如果是通過滑鼠點選事件來觸發動畫效果
可以使用

$("#button").click(function(){
    $("#div").stop().fadeToggle("slow");
});

$.stop()可以防止點選過快時，元素會呈現與點選次數相關的淡入淡出動畫迴圈

如果是通過滑鼠的移入移出來觸發動畫效果
可以使用

$("#div1").hover(
    function(){
        $("div2").stop().fadeTo("slow",1,function(){
            $(this).css("display", "block"
 
);
        })
    },
    function(){
        $("div2").stop().fadeTo("slow",0,function(){
            $(this).css("display", none);
        })
    }
);

之所以用hover而不是用mouseout mouseover，因為當時的情況是需要滑鼠進入元素時，觸發淡入效果，懸停時，一直呈現元素的淡入狀態，而從懸停狀態轉到移出狀態時，才執行淡出動畫。

而且，如果元素內包含多個子元素，類似於

<div id="div1">
    <div
 
 id="div2"></div>
    <div id="div3"></div>
</div>

對於div1繫結mouseout mouseover事件，如果滑鼠在div2和div3之間移動時，就會出現多次淡入淡出動畫效果
而用hover就可以實現我們想要的效果
在執行的回撥函式中新增改變元素的樣式，是因為，在淡出效果結束後，雖然看不見了，但是元素依舊在那裡，此時滑鼠移入時，仍然會觸發淡入動畫，這顯然也不是我們想要的，所以，在動畫結束後，讓他none