jQuery淡入淡出效果

• 2021 年 11 月 8 日
• 笔记
• 日常学习笔记

如果是通过鼠标点击事件来触发动画效果
可以使用

$("#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

<div id=”div1″>    <div id=”div2″></div>    <div id=”div3″></div></div>