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()动画滞后执行的解决方案的更多相关文章

  1. animate 动画滞后执行的解决方案

    jQuery动画: animate 容易出现连续触发.滞后反复执行的现象: 针对 jQuery 中 slideUp.slideDown.animate 等动画运用时出现的滞后反复执行等问题的解决方法有 ...

  2. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  3. jQuery 动画的执行

    jQuery 动画的执行 <%@ page language="java" import="java.util.*" pageEncoding=" ...

  4. CSS3新特性—animate动画

    1.animate介绍 1. @keyframes 自定义动画名称 { from { } to { } } 2. 通过动画名称调用动画集 animation-name: 动画集名称. 3. 属性介绍: ...

  5. 解决animate动画连续播放bug

    在animate动画中,如果几个div之间频繁切换,会导致鼠标移开后,动画仍在继续,解决方法有两个 一个,判断当前是否在运行动画: if(!$(".block").is(" ...

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

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

  7. jquery IE6 下animate 动画的opacity无效

    jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~

  8. UIIimageView读取图片的两种方式及动画的执行

    /**count:图片数量 name:图片名称*/ - (void)runAnimationWithCount:(int)count name:(NSString *)name { if(self.t ...

  9. Android 中加载几百张图片做帧动画防止 OOM 的解决方案

    Android 中加载几百张图片做帧动画防止 OOM 的解决方案 最近,项目中有个需求:就是要做一个帧动画,按理说这个是很简单的!但是我能说这个帧动画拥有几百张图片吗?...... 填坑一 ---帧动 ...

随机推荐

  1. sql调优2

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数据 ...

  2. securecrt 方向键乱码解决

    1 下载安装包rlwrap: rlwrap-0.30.tar.gz     http://utopia.knoware.nl/~hlub/uck/rlwrap/   2  install rlwrap ...

  3. [蓝桥杯]PREV-27.历届试题_蚂蚁感冒

    问题描述 长100厘米的细长直杆子上有n只蚂蚁.它们的头有的朝左,有的朝右. 每只蚂蚁都只能沿着杆子向前爬,速度是1厘米/秒. 当两只蚂蚁碰面时,它们会同时掉头往相反的方向爬行. 这些蚂蚁中,有1只蚂 ...

  4. 2019春招——Vivo大数据开发工程师面经

    Vvio总共就一轮技术面+一轮HR面,技术面总体而言,比较宽泛,比较看中基础,面试的全程没有涉及简历上的东西(都准备好跟他扯项目了,感觉是抽取的题库...)具体内容如下: 1.熟悉Hadoop哪些组件 ...

  5. 6.824 LAB1 环境搭建

    MIT 6.824 LAB1 环境搭建 vmware 虚拟机 linux ubuntu server   安装 go 官方安装步骤: 下载此压缩包并提取到 /usr/local 目录,在 /usr/l ...

  6. 刘志梅201771010115.《面向对象程序设计（java）》第十五周学习总结

    实验十五  GUI编程练习与应用程序部署 实验时间 2018-12-6 1.实验目的与要求 (1)一个JAR文件既可以包含类文件,也可以包含诸如图像和声音这些其他类型的文件. 创建一个新的JAR文件应 ...

  7. ct

    b80e00u9dxwpqw7bt98rm5zmlxt08cxs A3WKXKBHWDUOEOP3EVJA2YRM6JSZPJWGTCQ5BSYAWI4GMSIXOAT2IQ

  8. java.lang.Long 类源码解读

    总体阅读了Long的源码,基本跟Integer类类似,所以特别全部贴出源码,直接注释进行理解. // final修饰符 public final class Long extends Number i ...

  9. php curl请求页面数据

    /** * * [curl_post post方式请求] * * @param [type] $url [description] * * @param string $data [descripti ...

  10. (22/24) webpack实战技巧：静态资源集中输出

    工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中.此时 ...