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


Posted in Javascript onMay 07, 2015

用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下:

$(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo');

第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,而是当前的位置据其父元素顶部-300px。显然第一次已经移动到top:-300px的位置,第二次的top:-300px移动距离为0,所以没反应。
解决方法:

$(".page").stop().animate({top:“-=300px”}, 800, 'easeInOutExpo');

top:“-=300px”,这样第二次点击时会在第一次点击后的位置上继续移动-300px。

如果动画移动的距离是变量,就不能用“-=变量名”来写了:

function down() {
var page_h=$(".page").height(); //687
var page_top=parseInt($(".page").css("top")); //0
var move=wrap_top+page_h;
$(".page").stop().animate({top:move}, 800, 'easeInOutExpo');
};

var page_h=$(".page").height();获取page的高度并赋值给page_h,得到的值是数值;
var page_top=parseInt($(".page").css("top"));获取当前page顶部到其父元素顶部的距离并赋值给page_top,(parseInt:去掉"PX");
var move=wrap_top+page_h;计算移动距离;

这样每次动画都会重新获取“当前page顶部到其父元素顶部的距离”。

注意:$(".page").height()的值是不带px单位的,$(".page").css("top"))的值是带px单位的,需要parseInt将单位px像素单位删除才能计算。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
javascript 关于# 和 void的区别分析
Oct 26 Javascript
JavaScript中的细节分析
Jun 30 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
DIV始终居中的js代码
Feb 17 Javascript
js运动动画的八个知识点
Mar 12 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
基于Bootstrap实现城市三级联动
Nov 23 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 #Javascript
JS实现文字掉落效果的方法
May 06 #Javascript
DOM 高级编程
May 06 #Javascript
js获得当前系统日期时间的方法
May 06 #Javascript
js字符串操作方法实例分析
May 06 #Javascript
ajax+jQuery实现级联显示地址的方法
May 06 #Javascript
javascript十六进制及二进制转化的方法
May 06 #Javascript
You might like
php桌面中心(四) 数据显示
2007/03/11 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
php curl发送请求实例方法
2019/08/01 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
详解django中Template语言
2020/02/22 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
运动会广播稿200字
2014/01/15 职场文书
加工操作管理制度
2014/01/19 职场文书
业务员的岗位职责
2014/03/15 职场文书
家长写给孩子的评语
2014/04/18 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
义诊活动总结
2015/02/04 职场文书
公司年夜饭通知
2015/04/25 职场文书
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫