首先先来看一下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（）问题的更多相关文章

  1. 带动画效果的jQuery手风琴

    带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...

  2. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  3. Jquery基础（动画效果的轮播图特效）

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  4. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

  5. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  6. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  7. 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板

    这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...

  8. Android利用温度传感器实现带动画效果的电子温度计

    概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...

  9. 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计

    要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...

随机推荐

  1. 谁都能看懂的单点登录（SSO）实现方式（附源码）

    SSO的基本概念 SSO英文全称Single Sign On(单点登录).SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他应用中用于同 ...

  2. codeforces 711B - Chris and Magic Square（矩阵0位置填数）

    题目链接:http://codeforces.com/problemset/problem/711/B 题目大意: 输入 n ,输入 n*n 的矩阵,有一个占位 0 , 求得将 0 位置换成其他的整数 ...

  3. MySQL笔记-最简单的方法来解决找不到mysqld.sock文件的问题

    首先,环境:ubuntu 14.04,采用apt-get的方式安装的,手动安装可能路径设置稍有区别. 1.安装MySQL后,用命令行首次启动时发现找不到Mysqld.sock文件,提示: ERROR ...

  4. HTTP错误404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求

    http://www.cnblogs.com/JKqingxinfeng/archive/2012/10/29/2744663.html HTTP错误404.13 - Not Found 请求筛选模块 ...

  5. SmartUpLoad自动上传包

    一枚默默的开发学习者 用以下代码生成文件名即可 1 package info.haowei.util; 2 3 import java.text.SimpleDateFormat; 4 import ...

  6. Mac按键

    ⌘——Command ⌃ ——Control ⌥——Option (alt) ⇧——Shift ⇪——Caps Lock ⌫——Delete

  7. [asp.net core]project.json（2）

    摘要 上篇文章介绍了project.json中的一部分属性.属性真的比较多,所以分开了,考虑到其中的英文比较简单,也不再进行翻译了,从英文原文中,直接粘贴过来了. project.json(1) pr ...

  8. shell编程中for file in $*; do是什么意思.

    $*是此行命令所在函数(脚本)的所有被传入参数的合集与$@类似,不用引号的情况下没有区别区别是当被""扩起来以后"$*"被当做一个字符串"$@&quo ...

  9. 如何使用jquery - ui 的图标icons 及图标的相对位置 +jquerui是如何来显示图标的?

    1. 只需要引入 jquery-ui 的主css文件: jquery-ui.css 文件?? 不需要 引入 jquery-ui-structure/theme.css文件??? ,,,,, 2. 一定 ...

  10. Job中织梦标签的调用

    织梦CMS是一个好东东, 可以让一个网站更好维护和管理, 唯一让我感到忧桑的就是经常在搭后台的时候记不住那些标签,,无奈只能去看手册,有相同的案例直接COPY过来,直接用就OK~~~其实CMS这个东西 ...