jQuery中is方法防止动画重复执行、停止执行的方法-jquery-网页制作-壹聚教程网jQuery中is方法防止动画重复执行、停止执行的方法
jQuery中is是用来判断命令是不是执行了，这个我们只需要if(!$(.content).is(:animated))即可了，具体的来看一个例子。
定义和用法
is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
与其他筛选方法不同，.is() 不创建新的 jQuery 对象。相反，它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用，比如事件处理程序。
返回 false，因为 input 元素的父元素是 p 元素：
& var isFormParent = $(&input[type='']&).parent().is(&form&);
& $(&div&).text(&isFormParent = & + isFormParent);
典型的语法：
$(selector).hide(speed,callback)
当需要动画结束后才去执行特定语句，这里用callback能实现。更复杂的情况我觉得用判断动画是否正在执行或是否执行完成，会更妥当。
防止重复执行动画避免页面混乱
可以先判断一下元素是否处于动画中。
if(!$(&.content&).is(&:animated&)){
//元素不处于动画中执行。
在动画事件执行前加上一个判断，比如产生动画效果目标的是target，那么要加上判断
if(!target.is(&:animated&)){}，
if(!$(selector).is(&:animated&)){
& $(selector).hide(speed,callback)
这可以保证动画只会在上一次动画结束后才会执行，保持动画的完整性，但是在短动画情况下，连续点击时会有反应迟钝的感觉。
而用stop可以强制动画当前执行，直接结束，回到初始状态或结束状态，这会造成动画脱节感，但反应迅速。权衡使用。
$(&#div&).stop();//停止当前动画，继续下一个动画&
$(&#div&).stop(true);//清除元素的所有动画&&&&&&&
$(&#div&).stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$(&#div&).stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
上一页： &&&&&下一页：相关内容jquery调用delay()方法延时执行动画效果
调用delay()方法延时执行动画效果delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：$(selector) delay(duration)其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执
调用delay()方法延时执行动画效果
delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：
$(selector).delay(duration)
其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网&
[ 你可能感兴趣的文章 ]
[ 扫一扫，在手机上阅读 ]
[前端插件推荐] Plugin
响应式无限轮播jQuery旋转木马插件
爱思资源网 Copyright
All rights reserved.(晋ICP备号-1)后使用快捷导航没有帐号？
查看: 392|回复: 0
如何防止jQuery对象动画重复执行
本帖最后由 antzone 于
18:52 编辑
如何防止jQuery对象动画重复执行:
很多朋友可能会遇到这样的时候，如果有一个mouseover事件触发的动画效果，如果鼠标连续移入的话，可能会导致动画被多次执行，这种情况很可能是我们不想要的下过，下面就介绍一下如何防止此种现象的发生。
[JavaScript] 纯文本查看 复制代码运行代码if(!$(&.content&).is(&:animated&)){
上面的代码就是判断指定元素是否处于动画之中，如果没有处于动画之中，则执行响应操作。
1.is()函数可以参阅一章节。
2.:animated选择器可以参阅一章节。
Powered by
Copyright &jQuery 动画是一个一个执行的,有队列,有办法说,不要排队,同时..._jquery吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：37,514贴子：
jQuery 动画是一个一个执行的,有队列,有办法说,不要排队,同时...收藏
jQuery 动画是一个一个执行的,有队列,有办法说,不要排队,同时执行吗?
游戏特效培训,毕业年薪20w,来CGWANG吧!
你确定知道自己想说什么？
settimeout帮你解决问题，膜拜我的理解能力吧
我理解你的意思了，新人你想要同时间去做2件事情的话，网页是办不到的，只能模拟，事件里去争渡，像JQUERY的动画事件就是这样，我这样给你描述，你会清晰一点，比如a,b 2个小球在页面里跑，你想要2个同时跑，a的坐标+1，b的坐标也在+1，然后形成一个动画，这样的同时进行，其实就像多线程操作，但是即便是多线程也是先加完A再加B的，要么你的电脑特别点，2个CPU，同时运算的，机器人身上大概有，所以网页里模拟的时候是这样，不是说a运动完b才运动，是a运动一个很小的单位之后，b运动，再换回A，这样去操作，其实跟系统线程一样，挂起，激活，挂起，激活
4楼说的差不多～
每个事件都有相隔时间的，大概在1毫秒左右，肉眼看不出。
不见源码不死心！&!DOCTYPE html&&html&&head&&script src="jquery-1.9.1.js"&&/script&&script&function moveIt(pid){
$(pid).css("left",Math.random()*200);
$(pid).css("top",Math.random()*200);
setTimeout(function(){moveIt(pid);},100);}$(document).ready(function(){
setTimeout(function(){moveIt('#div1');},100);
setTimeout(function(){moveIt('#div2');},100);});&/script&&/head&&body&&div id="div1"style="background:#98bf21;height:100width:200position:left:200px"&&/div&&div id="div2"style="background:#98bf21;height:100width:200position:top:200left:200px"&&/div&&/html&
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或H5页面动画，在推广运营中应用的相当广泛。越是酷炫的动画，越能吸引用户。动画当然算是比较重要的一个环节，除此之外不得不提到的就是－动画滚动交互效果。
一、每个section怎样单独执行动画？
首先，引入动画库，这里我们使用animate.css（
&linkrel=&stylesheet&href=&css/animate.css&&
请注意：如果你只用了少量动画效果，请直接拷贝具体动画代码，而不再引入整个动画库。
其次，像往常一样编写你的html代码：
&sectionid=&wan_banner&&
&divclass=&warp&&
&divid=&left&class=&animate&&
&divclass=&pos bounce_in_down&&
&h3&α Space 物联网基站&/h3&
&i&革命性通信技术&/i&
&i&超低功耗传感器网络基站&/i&
&divid=&right&class=&animate&&
&imgclass=&bounce_in_right&src=&../image/product2.png&
width=&200&height=&406&/&
&/section&
我们来简单说一下这里的处理细节：
1.我们为#left，#right容器添加了animate类；
2.为animate子容器分别添加了bounce_in_down，bounce_in_right类；
接下来，我们来处理一下动画细节：
/*方式一*/
animation-play-state:
-webkit-animation-play-state:
.play.animate{
animation-play-state:
-webkit-animation-play-state:
/*方式二*/
opacity:0;
.play.animate{
opacity:1;
/*方式三*/
.play.animate{
/*动画类，此处举一个栗子，请确保bounceInDown动画已经引入*/
.play.bounce_in_down{
-webkit-animation:bounceInDown2sease-in-
上面列举了三种方式，方式一主要是先暂停动画，等待运行时机。方式二，三先隐藏元素，激活后，显示元素。
个人比较推荐第一种和第二种方式，第三种方式元素容器会变化，某种情况下会引起不必要的问题。
这里着重说明一下play类，我们暂且称它为动画触发类。思路就是，需要运行动画的元素添加animate类，先做暂停处理；当需要激活该元素动画的时候，为其父元素添加play类，从而触发动画运行。
很好，动画也可以触发了，那么最重要的运行时机怎么确定？下面我来介绍一下，滚动触发动画运行的方式。
二、如何检测页面滚动到了哪个section容器？
场景：页面分为多个section，我要实现，页面滚动到具体哪个section，为其添加play类。
$(window).scroll(function(event){
varscroll = $(window).scrollTop();
// Do something
console.log(scroll);
检测滚动的高度，然后取页面每个section位置，放入数组，如果当前滚动高度在section某个区间，那么就为其添加play类；
可是感觉比较麻烦，看看有没有其他好的办法。继续寻找方案二。。。。
借助插件，实现监听滚动
还是上面的html结构：
&sectiondata-scroll-watchid=&wan_banner&&
&divclass=&warp&&
&divid=&left&class=&animate&&
&divclass=&pos bounce_in_down&&
&h3&α Space 物联网基站&/h3&
&i&革命性通信技术&/i&
&i&超低功耗传感器网络基站&/i&
&divid=&right&class=&animate&&
&imgclass=&bounce_in_right&src=&../image/product2.png&
width=&200&height=&406&/&
&/section&
section部分添加了data-scroll-watch，这就告诉了ScrollWatch，此部分需要做滚动监听。
接下来，你需要初始化ScrollWatch插件，并做一些简单的配置调整。
varsw =newScrollWatch({
watchOnce: false,
infiniteScroll: false,
infiniteOffset: 50,
inViewClass: 'play',
onElementInView: function(data){
// console.log(data.el, '...is now in view');
哈哈，大家可能看出来了，方案二就是偷懒模式:see_no_evil:。我们借助scrollwatch来完成，详细信息请查看api。
三、继续升级：section进入视口，执行动画；section滚出视口，反向执行动画？
交互师又提出了一个需求：
当滚动到该区域时，动画执行；当该区域离开视图区域时，动画反向执行。我们接受挑战，看看如何实现。
第一反应当然是看看有没有现成的插件，这样可以省去重复造轮子的时间成本。很幸运，我看到了这篇文章
嗯，jquery smoove是个不错的方案。
注意：jquery smoove为另外一种实现方式，与之前说的上文没有任何关系！
首先：引入类库，请先引入jquery文件。
&script src=&///ajax/libs/jquery/1.11.1/jquery.min.js&&&/script&
&script src=&///ajax/libs/jquery-smoove/
0.2.6/jquery.smoove.min.js&&&/script&
我们对上面的html结构做一下简单的调整：
&sectionid=&wan_banner&&
&divclass=&warp&&
&divid=&left&class=&my_animate&data-move-x=&-100px&&
&divclass=&pos&&
&h3&α Space 物联网基站&/h3&
&i&革命性通信技术&/i&
&i&超低功耗传感器网络基站&/i&
&divid=&right&class=&my_animate&data-move-x=&100px&&
&imgsrc=&../image/product2.png&width=&200&height=&406&/&
&/section&
jquery smoove帮我们做好了动画，我们只需要为其添加特定属性。
请注意：#left和#right的容器内部已经变成了my_animate类，同时添加了data-move-x=”-100px”和data-move-x=”100px”语法。
用插件，肯定需要做一些初始化工作：
$(document).ready(function(){
$('.my_animate').smoove({
offset : '45%'
当该元素滚动到距离视口底部45%距离时，触发动画。更多的动画效果，请查看
到这里，整个处理方式应该很明晰了吧，希望能够帮到你。}