jq鼠标移入移出元素呈现淡入淡出效果总结

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

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

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值