关于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特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- Jquery基础（动画效果的轮播图特效）
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- Jquery如何使用动画效果改变背景色
Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板
这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...
- Android利用温度传感器实现带动画效果的电子温度计
概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...
- 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
随机推荐
- asp.net json 与xml 的基础事例
//json序列化和反序列化 using System.Runtime.Serialization.Json; public static string JsonSerializer<T> ...
- awk过滤数据
awk -F ',' '{if($2 ~/\./ ) {print $1,$2 }}' 20160905_names > ttt1 awk -F ',' '{if($2 !~/[0-9]+\.[ ...
- php装饰器模式完成文章编辑
<?php //文章父类 class BaseArt{ protected $content; protected $art; public function __construct($cont ...
- phpcms后台获取当前登录账号的数据
$amdinid=$_SESSION['userid'];$infoadmin=$this->admin->get_one(array('userid'=>$amdinid)); v ...
- Memcached深度分析
Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能.关于这个东西,相信很多人都用过,本文意在通过对 ...
- Java——文件选择框：JFileChooser
import java.awt.BorderLayout; import java.awt.Container; import java.awt.event.ActionEvent; import j ...
- Java 生成验证码图片
生成验证码图片并对提交的输入进行验证 // HttpServletResponse常见应用——生成验证码 // 利用BufferedImage类生产随机图片 public static final i ...
- Struts2 中Parameters是如何获取值的
刚刚学习struts2的知识,在练习struts2的默认语言OGNL过程中,对于<p>parameters:<s:property value="#parameters.u ...
- Nginx IP访问控制，只允许指定的IP地址访问
Nginx可以进行IP访问控制,配置指定的IP地址访问服务器网站 今天领导提出一个新的业务需求,网站上线时让外部用户在上线时间段访问到的页面是维护页面,公司内部员工在上线时段可用正常访问公司的网站. ...
- 通过LVS+Keepalived搭建高可用的负载均衡集群系统
1. 安装LVS软件 (1)安装前准备操作系统:统一采用Centos6.5版本,地址规划如下: 服务器名 IP地址 网关 虚拟设备名 虚拟ip Director Server 192.168 ...