用jQuery防止多次点击动画重复

1、在你的点击事件中加上一个判断,假设产生动画效果目标的是#aa这个节点,那么你要加上这个判断
if(!$("#aa").is(":animated")){
//执行你的操作
}
他会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感觉

2、$("#aa").stop(true,false).animate({...},1000);
这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画,会造成动画脱节不太美观,但是反应迅速
说到这里我们解释下stop()这个函数的用法。

stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。
stop在新版jQuery中添加了2个参数:
第一个参数的意思是是否清空动画序列,也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果,一般为false,跳过当前动画效果,执行下一个动画效果;
第二个参数是是否将当前动画效果执行到最后,意思就是停止当前动画的时候动画效果刚刚执行了一般,这个时候想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时候

3、第三种方法应用就需要设置一个判断是否处于动画的标志,一般是一个点击事件执行N多个步骤的动画之后然后跳到下一个动画。
var flag = false;
function aa(){
if(flag) return;//这里指当这个标志flag为真的时候,直接返回,不执行当前的这个动画。
flag=true;//这里是在执行这个动画的最开始的时候把标志flag设置为真,在这个动画没执行完之前这个值一直为真,当下次运行这个函数的时候,由于flag值为真,也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。
……………….
………………..
………………..
$(“#aa”).animated({“left”:”100″},1000,function(){
………………….
flag=false;//回到最初始状态,也是也表示这一轮动画执行完毕。
});
}

时间: 2025-01-02 04:37:10

用jQuery防止多次点击动画重复的相关文章

基于jQuery CSS3鼠标点击动画效果

分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="clearfix"> <div class="grid12 small12"> <div class="demos fl" id="demos&quo

基于jQuery+CSS3点击动画弹出表单代码

分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog" id="uploadDial

jquery简介之改变样式和动画效果

改变样式 css(name|pro|[,val|fn]) 返回值:String 访问匹配元素的样式属性. 参数 name   String     要访问的属性名称 properties  Map  要设置为样式属性的名/值对 name,value          String, Number      属性名,属性值 name,function(index, value)String,Function  1:属性名  2:此函数返回要设置的属性值.接受两个参数,index为元素在对象集合中的

Waves – 赞!超炫交互体验的点击动画效果

Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 touchend 事件,支持移动设备.赶紧来体验吧! 效果演示     插件下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十

jQuery获取被被点击元素的id属性值

jQuery获取被被点击元素的id属性值:有时候可能需要获取被点击元素的一些信息,本章就以id属性为例子,进行演示一下,当然在实际应用中可能没有如此的简单,不过复杂的功能都是由小的功能组合而成的,下面通过实例代码对此做一下简单介绍.代码如下: $(document).click(function (e){ var v_id=e.target.id; } ) 相关阅读:1.click事件而已参阅jQuery的click事件一章节. 2.target属性可以参阅jQuery的event.target

基于jQuery仿搜狐辩论投票动画代码

基于jQuery仿搜狐辩论投票动画代码.这是一款个性的卡通小人正方反方辩论投票特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript"> $(document).ready(function () { var a = 500; var b = 130; $("#white").animate({ width: 0, left: "250px" }, 10

如何防止jQuery对象动画重复执行

如何防止jQuery对象动画重复执行:很多朋友可能会遇到这样的时候,如果有一个mouseover事件触发的动画效果,如果鼠标连续移入的话,可能会导致动画被多次执行,这种情况很可能是我们不想要的下过,下面就介绍一下如何防止此种现象的发生.代码如下: if(!$(".content").is(":animated")){ //code } 上面的代码就是判断指定元素是否处于动画之中,如果没有处于动画之中,则执行响应操作.相关阅读:1.is()函数可以参阅jQuery的i

(三)实现菜单点击动画

在上一篇中,我们已经处理好了菜单的折叠和展开.如果你还没读过,可以点击下面的链接:http://www.cnblogs.com/fuly550871915/p/4930654.html 贴出上一篇文章的效果图吧,如下: 折叠和展开还不错.所写的代码也越来越简单,主要就是动画的添加而已.下面我们为每一个菜单添加点击动画.即,点击的时候,,让被点击的菜单放大消失,其他菜单缩小消失. 我们还是直接看代码,然后在做解释吧.还是修改ArcMenu中的代码,如下: 1 package com.example

jQuery源码分析系列(39) : 动画队列

data函数在jQuery中只有短短的300行代码,非常不起点 ,剖析源码的时候你会发现jQuery只要在有需要保存数据的地方无时无刻不依赖这个基础设施 动画会调用队列,队列会调用data数据接口还保存队列里面的的动画数据 所以我们在自习回顾下关于数据缓存 //These may be used throughout the jQuery core codebase //存数据的 //用户使用 data_user = new Data(); //存储对象 //jQuery内部私有 //用来存事件