案例3:事件切换及动画队列停止排队效果

    //鼠标移入事件

    $(".nav > li").mouseover(function(){

        $(this).children("ul").slideUp(200);

    })

    //鼠标离开事件

    $(".nav > li").mouseout(function(){

        $(this).children("ul").slideUp(200);

    })

    1.事件切换 hover 就是鼠标经过和离开的复合写法

    $(".nav>li").hover(function(){

      $(this).children("ul").slideDown(200);

    },function(){

      $(this).children("ul").slideUp(200);

    });

    2.事件切换hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数

    $(".nav>li").hover(function(){

      $(this).children("ul"),slideToggle();  //  li 下面的子元素 ul 移入显示出来,移出隐藏

    })

    注意:动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队的执行

    停止排队stop()方法

    stop( ) 写到动画或者效果的前面,相当于停止结束上一次动画

 

    $(".nav>li").hover(function(){

 

      $(this).children("ul"),stop().slideToggle();  // 停止上一次的动画

 

    })

 

转载于:https://www.cnblogs.com/qtbb/p/11333456.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值