jQuery中animate动画第二次点击事件没反应
2015-08-10 16:31
801 查看
jQuery中animate动画第二次点击事件没反应
用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。
如果动画移动的距离是变量,就不能用“-=变量名”来写了:
?
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像素单位删除才能计算。
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关文章推荐
- JQuery动画animate的stop方法使用详解
- jQuery的DOM操作之添加元素和删除元素
- jquery 使用相关记录
- jQuery动画效果animate和scrollTop结合使用实例
- 6款最新的 jQuery 图片裁剪插件
- jQuery中设置form表单中action值的方法
- jQuery 图片轮播
- jquery实现Li滚动时滚动条自动添加样式的方法
- jquery的动画函数animate()讲解一
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- jquery库与prototype库冲突的解决方法
- jQuery的DOM操作之捕获和设置
- jQuery 判断所有图片加载完成
- jQuery右下角旋转环状菜单特效代码
- Jquery常用工具函数总结
- jquery实现滑动特效代码
- [jquery实例] 判断图片资源加载完毕
- jquery 为动态生成元素绑定事件
- jquery学习
- jquery 回车事件