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之querySelector和querySelectorAll使用说明
Oct 09 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
详解基于element的区间选择组件校验(交易金额)
Jan 07 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实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
基于python socketserver框架全面解析
2017/09/21 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
活动总结的格式
2014/05/07 职场文书
员工生日活动方案
2014/08/24 职场文书
争先创优演讲稿
2014/09/15 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
详解php中流行的rpc框架
2021/05/29 PHP
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android