JQuery解决事件动画重复问题
开发项目时，经常要写动画效果，有时候会遇到动画重复问题，例如：当鼠标移动到某个元素上时，执行某个动画，当我鼠标多次移动到该元素时，该动画就要连续执行，那么怎么去解决呢？
话不多说，直接添代码，简单明了!
<!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解决事件动画重复问题的更多相关文章
- jQuery的事件,动画效果等
一.事件 click(function(){}) 点击事件 hover(function(){}) 悬浮事件,这是jQuery封装的,js没有不能绑定事件 focus(function(){}) ...
- Jquery中事件的重复绑定
问题:事件的绑定具有叠加效果,已有绑定的函数时,再次绑定,执行时会出现绑定多少次,触发多少次的情况 解决:1.on();绑定事件,提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind(). ...
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- 不写完不让回家的JQuery的事件与动画
在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...
- jQuery之事件和动画
1.加载DOM $(document).ready(function(){ }) 简写形式: $(function(){ }) 事件绑定: 合成事件 事件冒泡 移除事件 JQuery中的动画 show ...
随机推荐
- Windows下通过Composer安装Yii2 [ 2.0 版本 ]
安装好大于5.4或更高版本的PHP环境并开启openssl扩展.如果是Apache服务器,加载Apache的mod_ssl模块. 下载Composer并安装. 开始->运行[或者WIN+R]-& ...
- Python学习之异常处理
1.首先了解错误和异常的概念: 错误:代码运行前的代码错误或者是程序执行过程中的逻辑错误 1:语法错误:代码不符合解释器或者编译器语法(代码错误) 2:逻辑错误:不完整或者不合法输入或者计算出现问题( ...
- PHP echo汉字出现乱码的情况之一
当然首先要理清楚到底是web服务端造成,php造成的,还是数据库造成的. 需要在头文件里UTF-8 <head> <meta http-equiv="Content-Typ ...
- Delphi2010中DataSnap高级技术（转）
一. 为DataSnap系统服务程序添加描述 这几天一直在研究Delphi 2010的DataSnap,感觉功能真是很强大,现在足有理由证明Delphi7该下岗了. DataSnap有三种服务模式,其 ...
- laravel前后端分离的用户登陆 退出 中间件的接口与session的使用
在项目开发的过程中,需要有用户的登陆 退出 还有校验用户是否登陆的中间件; 基本思路: 登陆: 前端请求接口的参数校验 用户名 密码规则的校验 用户名密码是否正确的校验; 如果上面的校验都通过的了,把 ...
- FPGA各大厂商，不可不知
引言: FPGA市场前景诱人,但是门槛之高在芯片行业里无出其右.全球有60多家公司先后斥资数十亿美元,前赴后继地尝试登顶FPGA高地,其中不乏英特尔.IBM.德州仪器.摩托罗拉.飞利浦.东芝.三星这样 ...
- 蓝桥杯 算法训练 ALGO-60 矩阵乘法
算法训练 矩阵乘方 时间限制:1.0s 内存限制:512.0MB 问题描述 给定一个矩阵A,一个非负整数b和一个正整数m,求A的b次方除m的余数. 其中一个nxn的矩阵除m的余数得到的仍是一个 ...
- POJ3020(最小边覆盖)
Antenna Placement Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8924 Accepted: 4428 ...
- java数组求输入平均值
真是学了后面忘了前面,一维数组都忘了 package com.c2; //总结类型转换不对,导致运行报错 //以及没有new,导致空指针异常 //引入流. import java.io.*; publ ...
- Windows 环境下Java调用CRF++详解
1.步骤一览 2.步骤详情 2.1.环境准备 Swig(Simplified Wrapper and Interface Generator)下载,Windows操作系统直接解压即可使用 CRF++( ...