开发项目时，经常要写动画效果，有时候会遇到动画重复问题，例如：当鼠标移动到某个元素上时，执行某个动画，当我鼠标多次移动到该元素时，该动画就要连续执行，那么怎么去解决呢？

话不多说，直接添代码，简单明了!

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>解决动画重复方法</title>

    <script type="text/javascript" src="dist/js/jquery-1.7.1.js"></script>

    <script>

        $(function () {

            $('div:first').click(function () {

                if (!$('div:last').is(":animated")) {//关键代码，元素不处于动画中执行。

                    $('div:last').fadeToggle(1000, function () {

                        $(this).css("background", "green");

                    })

                }

            });

        });

    </script>

    <style>

        div{

            width: 300px;

            text-align: center;

            margin: auto;

            font-size: 20px;

        }

        #div1 {

            height: 100px;

            background-color: yellow;

            line-height: 100px;

        }

        #div2 {

            height: 300px;

            background-color: red;

            line-height: 300px;

        }

    </style>

</head>

<body>

<div id="div1">单击我</div>

<div id="div2">动画不重复执行！简单，实用！</div>

</body>

</html>

JQuery解决事件动画重复问题的更多相关文章

  1. jQuery的事件,动画效果等

    一.事件 click(function(){}) 点击事件 hover(function(){})   悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...

  2. Jquery中事件的重复绑定

    问题:事件的绑定具有叠加效果,已有绑定的函数时,再次绑定,执行时会出现绑定多少次,触发多少次的情况 解决:1.on();绑定事件,提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind(). ...

  3. jQuery绑定和解绑点击事件及重复绑定解决办法

    原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  6. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  7. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  8. 不写完不让回家的JQuery的事件与动画

    在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...

  9. jQuery之事件和动画

    1.加载DOM $(document).ready(function(){ }) 简写形式: $(function(){ }) 事件绑定: 合成事件 事件冒泡 移除事件 JQuery中的动画 show ...

随机推荐

  1. NOIp2018 D2T3 defense——树上倍增

    题目:https://www.luogu.org/problemnew/show/P5024 考场上只会写n,m<=2000的暴力,还想了想A1和A2的情况,不过好像只得了A1的分.然后仔细一看 ...

  2. 提升Apache网站访问速度的优化方法

    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. 在Apache服务器上怎样优化才能提高 ...

  3. 用Toast来增加调试效率的小技巧

    import android.content.Context; import android.widget.Toast; /** * Created by apple on 10/7/15. */ p ...

  4. 从JVM的角度解析String

    1. 字符串生成过程 我们都知道String s = "hello java";会将“hello java”放入字符串常量池,但是从jvm的角度来看字符串和三个常量池有关,clas ...

  5. laravel 中config的使用

    在laravel的config中添加配置文件(比如:alipay.php)文件内容为return数组的形式 在方法中使用config()函数获取数据 $config = config('alipay. ...

  6. Ubuntu 14.04报“leaking memory”错误

    在做一些实验的时候,临时配置了笔记本网卡eth0的IP地址,结果出现了以下错误, $ sudo ifconfig eth0 192.168.2.100/24 no talloc stackframe  ...

  7. Oracle LSNRCTL------监听器的启动和关闭

    对于DBA来说,启动和关闭oracle监听器是很基础的任务,但是Linux系统管理员或者程序员有时也需要在开发数据库中做一些基本的DBA操作,因此了解一些基本的管理操作对他们来说很重要. 本文将讨论用 ...

  8. 杂项-EMS：CRM

    ylbtech-杂项-EMS:CRM CMS是"Content Management System"的缩写,意为"内容管理系统". 内容管理系统是企业信息化建设 ...

  9. 012. MVC5中Razor引擎使用模板页

    1.文件→新建项目→框架选择.NET Framework 4.5 2.确定后选择ASP.NET 4.5 模板→MVC→为以下项添加文件夹和核心引用→MVC, 在vs 2015中默认就使用的Razor引 ...

  10. Dynamics CRM early binding and late binding

    The key advantage of late bound entity classes is that customer entities and attributes not avaliabl ...