关于jquery自带动画效果的stop（）问题

Posted zifieyu666

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于jquery自带动画效果的stop（）问题相关的知识，希望对你有一定的参考价值。

首先先来看一下jquery中stop（）的用法

  • stop（）用于在动画执行前停止正在执行的动画
  • stop（stopAll,goToEnd）的两个参数为布尔值；
  • stopAll:true/false；是否停止对象接下来所有的动画；
  • goToEnd:true/false;停止方式是直接将动画播放到结束位置还是停止在当前位置。

jquery中的fadeIn、fadeOut,slideDown、slideUp如果设置stop(false,false)，动画停止的位置将被记录下来，下一次动画走到上次被停止的位置就会结束。而我们需要的是下一次动画依旧能够完整执行，所以需要设置stop（true，true），将动画直接播放到结束。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <style type="text/css">
        .wodejifen_box{
            position:relative;
            width:80px;
            height:34px;
            overflow: visible;
        }
        .wodejifen{
            height:34px;
            font-size: 12px;
            width:80px;
            line-height: 34px;
            border:1px solid red ;
            text-align: center;
        }
        .wodejifen_content{
            position:absolute;
            width:150px;
            top:34px;
            left:0;
            border:1px solid black;
            padding:5px;
            display:none;
        }
        .wodejifen_content li{
            border-bottom:1px solid black;
            line-height:20px;
            list-style: none;
            padding:0;
        }

    </style>
</head>
<body>
<div class="wodejifen_box">
    <div class="wodejifen">
        我的积分    
    </div>
    <ul class="wodejifen_content">
            <li>内容0000000</li>
            <li>内容1111111</li>
            <li>内容2222222</li>
            <li>内容3333333</li>
    </ul>
</div>
    
    <script type="text/javascript">

        $(‘.wodejifen‘).mouseover(function(event){
            $(‘.wodejifen_content‘).stop(true,true).slideDown(150);
        }).mouseout(function(event){
            $(‘.wodejifen_content‘).stop(true,true).slideUp(150);
        });

    </script>
</body>
</html>

 

以上是关于关于jquery自带动画效果的stop（）问题的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 停止动画-jQuery stop()

jquery中stop停止动画笔记

jquery 实现重复点击一个元素时不重复执行效果

jQuery 停止动画

jquery .stop()的用法

JQuery中stop方法的使用