知识点---animate()动画滞后执行的解决方案
jQuery动画:
animate 容易出现连续触发、滞后反复执行的现象;
针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有如下:
1、在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题(使用setTimeout)
2、在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用stop)推荐这种。
//第二种方式 $(".container").stop();//停止当前动画,继续下一个动画 $(".container").stop(true);//清除元素的所有动画 $(".container").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画 $(".container").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态
//例如,
1 $(".container").stop().animate({
2 marginTop:"60px",
3 width:"100px",
4 height:"50px"
5 },500);
动画效果一、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:300},1500);
$("div").animate({width:300},1500);
$("div").animate({height:100},1500);
$("div").animate({width:100},1500);
});
$("#stop").click(function(){
$("div").clearQueue();
});
});
</script>
</head>
<body>
<button id="start">开始动画</button>
<button id="stop">停止动画</button>
<br><br>
<div style="background:red;height:100px;width:100px;"></div>
</body>
</html>
动画效果二、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我,显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>
动画效果三、
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").animate({top:"100px"});
});
$(".btn2").click(function(){
$("p").animate({top:"0px"});
});
});
</script>
</head>
<body>
<button class="btn1">动画</button>
<button class="btn2">重置</button>
<p style="position:relative">这是一个段落。</p>
</body>
</html>
知识点---animate()动画滞后执行的解决方案的更多相关文章
- animate 动画滞后执行的解决方案
jQuery动画: animate 容易出现连续触发.滞后反复执行的现象: 针对 jQuery 中 slideUp.slideDown.animate 等动画运用时出现的滞后反复执行等问题的解决方法有 ...
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jQuery 动画的执行
jQuery 动画的执行 <%@ page language="java" import="java.util.*" pageEncoding=" ...
- CSS3新特性—animate动画
1.animate介绍 1. @keyframes 自定义动画名称 { from { } to { } } 2. 通过动画名称调用动画集 animation-name: 动画集名称. 3. 属性介绍: ...
- 解决animate动画连续播放bug
在animate动画中,如果几个div之间频繁切换,会导致鼠标移开后,动画仍在继续,解决方法有两个 一个,判断当前是否在运行动画: if(!$(".block").is(" ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- jquery IE6 下animate 动画的opacity无效
jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~
- UIIimageView读取图片的两种方式及动画的执行
/**count:图片数量 name:图片名称*/ - (void)runAnimationWithCount:(int)count name:(NSString *)name { if(self.t ...
- Android 中加载几百张图片做帧动画防止 OOM 的解决方案
Android 中加载几百张图片做帧动画防止 OOM 的解决方案 最近,项目中有个需求:就是要做一个帧动画,按理说这个是很简单的!但是我能说这个帧动画拥有几百张图片吗?...... 填坑一 ---帧动 ...
随机推荐
- javax.el.PropertyNotFoundException: Property 'XXX' not found on type bean.XXXXX
javax.el.PropertyNotFoundException: Property 'XXX' not found on type bean.XXXXX 先检查页面语法是否有问题,后在页面的el ...
- Tcl 编译成tbc文件
工具:tclpro1.4 下载地址:https://www.tcl.tk/software/tclpro/eval/1.4.html 永久license: Version 1.4: 1094-320 ...
- innobackupex 远程备份
# 远程备份./innobackupex --defaults-file=/etc/my.cnf --no-timestamp -user xxx --host xx.xx.123 --passwor ...
- 编辑器-vim
编辑器之神-vim vi简介 vi是“Visual interface”的简称,它在Linux上的地位就仿佛Edit程序在DOS上一样.它可以执行输出.删除.查找.替换.块操作等众多文本操作,而且用户 ...
- linux kernel mini2440 start.S head-common.S 部分注释
内核版本:2.6.32.2(mini2440光盘源码) github地址:https://github.com/guanglun/mini2440_uboot_linux (for_len分支 htt ...
- Android USB ADB ATUH 验证包验证流程
#define ADB_AUTH_TOKEN 1 #define ADB_AUTH_SIGNATURE 2 #define ADB_AUTH_RSAPUBLICKEY 3 1. 连接USB,手机发 ...
- java.util.concurrent包下集合类的特点与适用场景
java.util.concurrent包,此包下的集合都不允许添加null元素 序号 接口 类 特性 适用场景 1 Queue.Collection ArrayBlockingQueue 有界.阻塞 ...
- meter命令行模式运行,实时获取压测结果 (没试过 说不定以后要用)
jmeter很小,很快,使用方便,可以在界面运行,可以命令行运行.简单介绍下命令行运行的方式 上面一条命令应该可以满足大部分需求. 使用-R指定节点时,当然要首先在这些节点上启动jmeter-serv ...
- socket开发总结
1.connect 阻塞socket connect时会等待返回结果,等于0表示成功,小于0表示失败. 非阻塞socket connect时会立刻返回结果,等于0表示成功,小于0且errno == E ...
- SpringMVC Controller接收前台ajax的GET或POST请求返回各种参数
这几天写新项目遇到这个问题,看这位博主总结得不错,懒得写了,直接转!原文:http://blog.csdn.net/yixiaoping/article/details/45281721原文有些小错误 ...