zoukankan      html  css  js  c++  java
  • 案例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();  // 停止上一次的动画

        })

  • 相关阅读:
    中考 2020 游记
    CodeChef 2020 July Long Challenge 题解
    GDOI2020 游记
    AtCoder Grand Contest 044 题解
    ISIJ2020 不知道算不算游记
    WC2020 拿铁记
    UOJ Round 19 题解
    本博客采用 CC BY-NC-SA 4.0 进行许可
    [算法模版]回文树
    AddressSanitizer
  • 原文地址:https://www.cnblogs.com/qtbb/p/11333456.html
Copyright © 2011-2022 走看看