一. 在使用animate()的时候 前面需要加上.stop()来防止移进移出的山东问题。

二.

   

1.定义: stop() 方法为被选元素停止当前正在运行的动画。

2.语法:  $(selector).stop(stopAll,goToEnd)

           参数:

                   stopAll     : 可选。规定是否停止被选元素的所有加入队列的动画。默认是 false。

                   goToEnd  : 可选。 规定是否立即完成当前的动画。 默认是false。 该参数只有 在设置了stopAll参数时才能使用。

第一个参数的意思是 是否清空动画序列, 也就是停止的是当前元素的动画效果还是后面附带的所有动画的效果,一般为false,跳过当前的动画效果,执行下一个动画效果。

第二个参数的意思是 是否将当前的动画进行到最后,意思就是 停止当前动画的时候动画效果刚好执行了一半,这个时候想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时候。

   
 <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>stop的用法案例</title>
<style type="text/css">
#animater{
width: 150px;
background:activeborder;
border: 1px solid black;
/*为了移动,需设置此属性*/
position: relative;
}
</style>
<script type="text/javascript" src='/style/js/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(function(){
$("#start").click(function(){
$("#box").animate({height:},"slow");
$("#box").animate({width:},"slow");
$("#box").animate({height:},"slow");
$("#box").animate({width:},"slow");
});
// 点击不同的button执行不同的操作
$('#button1').click(function(){
//默认参数是false,不管写一个false还是两个false还是没写false效果一样
$('#box').stop();
});
$('#button2').click(function(){
//第二个参数默认false
$('#box').stop(true);
});
$('#button3').click(function(){
$('#box').stop(false,true);
});
$('#button4').click(function(){
$('#box').stop(true,true);
});
})
</script>
</head>
<body>
<p><input type='button' value='开始测试' id='start'></p>
<div id="button">
<input type="button" id="button1" value="stop()"/>
<input type="button" id="button2" value="stop(true)"/>
<input type="button" id="button3" value="stop(false,true)"/>
<input type="button" id="button4" value="stop(true,true)"/>
</div>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">stop运动参数测试</div>
</body>
</html>

随机推荐

  1. Monkey for iOS(CrashMonkey4IOS)

    CrashMonkey4IOS介绍 支持真机测试.模拟器测试 支持收集系统日志(Systemlog).崩溃日志(Crashlog).instrument行为日志 支持测试报告截图,绘制行为轨迹 支持测 ...

  2. 同表复制修改日期的procedure

    同表复制数据,让其日期增加 算出总共的天数,用group by 分类后的. space 提前求出第一块数据的总和 sum = select count(*) from tbl_event; 固定操作第 ...

  3. @autoreleasepool在MRC和ARC中的区别

    对于@autoreleasepool {} (1)在ARC中会销毁所有在里面创建的对象,即使你用外面的Strong指针指向他 (2)在MRC中如果有外部的强指针指向,不会销毁对象,retainCoun ...

  4. Qt中2D绘图问题总结(一)----------基本的绘制与填充

    刚刚开始学习Qt不久,才开始渐渐地熟悉基础内容,学习过程中的一些知识的总结和感悟希望通过博客记录下来,与大家分享学习的同时,也是对自己坚持下去的鞭策,废话不多说了,开始第一次的小总结吧. Qt提供了强 ...

  5. Html标签第三课

    1.css div { position:absolute; } #d1 { height:100px; width:100px; border: solid 1px red; background- ...

  6. 把本地代码同步到github

    2016-05-03 12:52:00 把代码同步到远程github,还算比较顺利.主要参考了以下两个博客,谢谢 http://blog.csdn.net/duxinfeng2010/article/ ...

  7. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  8. AspNetPager控件分页使用方法

    AspNetPager控件官方下载地址:http://www.webdiyer.com/aspnetpager/ 把控件加到项目中(添加自定义控件的方法),并把它拖放到页面上 <asp:Scri ...

  9. 存到cookie里能提高性能吗?

    今天刚刚看了篇微信,大体意思是说g哥之类的网站把很多存session的东西都放cookie里了,可减少服务器的负担种种.然后我就发现我对request到application的记忆有些模糊了,哪些是在 ...

  10. Mac上安装与更新Ruby,Rails运行环境

    Mac安装后就安装Xcode是个好主意,它将帮你安装好Unix环境需要的开发包,也可以独立安装command_line_tools_for_xcode 1.安装RVM RVM:Ruby Version ...