• 技术文章 >web前端 >js教程

    javascript中stop方法的作用是什么

    醉折花枝作酒筹醉折花枝作酒筹2021-07-21 11:44:36原创74

    javascript中stop方法作用是阻止在连续动画或事件中出现重复累积状况的,语法格式为“$(元素).stop是否停止动画,是否允许完成当前动画)”。stop()在语法上的两个参数都是Boolean布尔值。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    作为前端开发人员,JS和JQuery是我们经常用到的开发语言和工具类库。我们都晓得,在jQuery中有一个很强大的方法——stop(),他是阻止在连续动画或事件中出现重复累积状况的方法。那么,stop()怎么用呢?来带大家先认识一下stop()吧:

    stop()在语法上有两个参数,分别都是Boolean布尔值。且都是可选的,但是也有规定,如下:

    $(selector).stop(stopAll,goToEnd)

    参数:(默认情况下,不写参数,则会被认为两个参数都是false。)

    stopAll:可选。规定是否停止被选元素的所有加入队列的动画。意思就是如果该参数值为true,则会停止所有后续动画或事件。如果该参数值为false,则只停止被选元素当前执行的动画,后续动画不受影响。因此,该参数一般都为false。

    goToEnd:可选。规定是否允许完成当前动画,该参数只能在设置了stopAll参数时使用。上面我们说了,stopAll参数我们一般都会写fasle值,不是默认,而是真实的写上该参数。那么goToEnd参数就有两个选择了,一个是false,一个是true。其中意思,大家应该都明白了。一般都为true。意思就是允许完成当前动画。

    下面是对应的代码:

    HTML:

    <div id="content">
        <div class="slide_box">
          <div class="img"> 
        <img src="images/page_a.png">
            <div class="start"> <a class="start_btn" href="javascript:void(0)">开始抽奖</a> </div>
          </div >
          <div class="img" style="display:none;" > 
        <img src="images/page_b.png"> 
        <a class="rank_30" href="javascript:void(0);">30级</a> 
        <a class="rank_45" href="javascript:void(0);">45级</a> 
        <a class="rank_55" href="javascript:void(0);">55级</a> 
      </div>
          <div class="img" style="display:none;" > 
        <img src="images/page_c.png"> 
        <a class="prize_notes" href="javascript:void(0);">奖品记录</a> 
      </div>
        </div>
    </div>

    CSS:

    #content{/* margin-top:10em;*/ width:48em; margin:0 auto;}
    
    #content div{ display:block; width:100%;}
    
    #content div.cont_b{ position:relative; text-align:center;background:url(../images/content_bgb.jpg) no-repeat; background-size:100% 100%;}
    
    #content div img{ display:block; width:100%; border:none;}
    
    #content div .slide_box{ position:absolute; top:0px; width:100%; }
    
    #content div .img .start{ position:absolute; top:290px;}
    
    #content div .img a.start_btn{ display:block; width:150px; height:150px; text-indent:-9999px;  margin:0 auto;}/*修改*/
    
    #content div .img a.rank_30{ position:absolute; top:230px; left:70px; display:block; width:250px; height:60px; text-indent:-9999px;}
    
    #content div .img a.rank_45{ position:absolute; top:230px; left:460px; display:block; width:250px; height:60px; text-indent:-9999px;}
    
    #content div .img a.rank_55{ position:absolute; top:430px; left:170px; display:block; width:280px; height:60px; text-indent:-9999px;}
    
    #content div .img a.prize_notes{ position:absolute; top:470px; right:50px; display:block; width:150px; height:150px; text-indent:-9999px;}

    JS_jQuery:

    var page =$(".slide_box .img");
    
    var page_num = page.length;
    
    var num = 0;
    
        $(".next_btn").click(function(e){
    
        if(num < 2){
    
    page.slideUp().stop(false,true).eq(num+1).slideDown();
    
    num++;
    
    }else{
    
    page.slideUp().stop(false,true).eq(0).slideDown();
    
    num = 0;
    
    }
    
    });
    
    });

    上面是在工作中写一个点击事件效果时遇到的事件累积情况,,在JS部分,有用到stop()方法,大家可以将参数去掉或改变,试试看。希望对大家有所帮助。

    【推荐学习:javascript高级教程

    以上就是javascript中stop方法的作用是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:jQuery stop()
    上一篇:Javascript如何获取body内容 下一篇:javascript可以实现哪些效果
    第16期线上培训班

    相关文章推荐

    • javascript关闭后有什么影响• javascript中show方法怎么用• JavaScript如何处理事件冒泡• javascript的基本结构是什么• Javascript如何获取body内容

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网