解决点击多次jquery动画animate反应迟钝的问题

最近做了一个网页，用到了animate的动画效果，点击连接就滚动屏幕到相应的位置，可是前几次点击没有问题，随着点击次数的增多，动画响应越来越慢，到后来点击一次要等好几秒才开始滚动，最后我找到了原因，动画没有播放结束，队列越来越长导致的。

解决办法： $(‘body‘).stop().animate({scrollTop:aaa},300);在animate前加一个stop即可停止当前动画清空队列马上执行新的动画。

附上stop();的使用方法：
stop([clearQueue], [gotoEnd])
概述 停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行。

参数
clearQueue (可选)Boolean如果设置为true，则清空队列。可以立即结束动画。

gotoEnd (可选)Boolean让当前正在执行的动画立即完成，并且重设show和hide的原始样式调用回调函数等。

解决点击多次jquery动画animate反应迟钝的问题

时间： 2024-10-10 01:39:32

解决点击多次jquery动画animate反应迟钝的问题的相关文章

jQuery动画animate方法使用介绍

jQuery动画animate方法使用介绍 用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式.paramsOptions一组包 含作为动画属性和终值的样式属性和及其值的集合 params 对象{},注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left,如果使用

JQuery动画animate的stop方法使用详解

JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="styl

jQuery动画animate()的使用

自己定义动画效果: 使用方法:animate(js对象,运行时间.回调函数): js对象:{ }描写叙述动画运行之后元素的样式 运行时间:毫秒数 回调函数:动画运行结束后要运行的函数 html代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script t

JavaScript强化教程——jQuery动画

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery动画 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性. 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒

jquery动画，获取，添加

动画: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>stop实验测试</title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.min.js"><

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

jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部 -300px的位置,第二次点击时的并不是page在

jQuery中动画animate(下)

jQuery中动画animate(下) animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过animate提供的第二种设置语法,传递一个对象参数,可以拿到动画执行状态一些通知 .animate( properties, options ) options参数 duration - 设置动画执行的时间 easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数 step:规定每个动画的每一步完成之后要执行的函数 prog

jQuery中动画animate(上)

jQuery中动画animate(上) 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了 操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别 $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画 语法: .animate( properties ,[ duration ], [ easing ], [ com

jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法

jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如backgroundPosition这种神器火狐上竟然用不了,于是我就自己写了一个. 1 /** 2 * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 3 * @author Meleong 4 * v1.00 5 */ 6 (function($) { 7 $.fx.step["backgroundPosition"] = function(fx) {