jQuery 动画冲突
jQuery animations conflict
我尝试使用jQuery动画来制作div内容的动画,并使用关闭按钮将所有内容重置为默认值。问题在于,单击关闭按钮并将所有内容重置为默认值后,第一个动画将再次开始。
$(document).ready(function(){
$(".order-b").click(function(){
$(".order-t").animate({top:'30%'}, "slow" );
$(".order-c").animate({opacity: '1', top:'70%'}, "slow" );
$(".order-ca").delay('800').animate({opacity:'1'}, "slow" );
}).clearQueue().stop();
$(".order-c").click(function(){
$(".order-ca").animate({opacity:'0'}, "fast" );
$(".order-t").delay('800').animate({top:'52%'}, "slow" );
$(".order-c").delay('800').animate({opacity: '0', top:'70%'}, "slow" );
});
});
<div class="process-bars">
<div class="process-bar order-b">
<div class="process-title order-t">
<i class="fa fa-shopping-cart"></i>
<h1>Order</h1>
</div>
<div class="process-caption order-ca">
<p>Text</p>
</div>
<div class="process-close order-c">
<i class="fa fa-times-circle"></i>
</div>
</div>
</div>
我做错了什么?!
类 .order-b 位于类 .order-c 内,因此事件单击将始终在单击进入div 时触发。你必须使用 http://api.jquery.com/event.stoppropagation/
你的div 与类
"process-bar order-b"
是来自的父div
"process-close order-c"
因此,如果您轻拂订单 c,来自订单 b 的"点击"事件也会触发。
你必须把那个孩子和班级顺序-c放在外面。 不在带有类"订单-B"的div 中。
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- jQuery 动画冲突
- 间歇性的 Javascript 动画冲突
- iOS 7+ 向后滑动手势与状态更改动画冲突
- 滚动到顶部并动画滚动到 #page 链接冲突
- Jquery 鼠标悬停在与其他动画函数冲突的移动上
- jQuery'的滑动函数与CSS动画冲突
- ngRoute与动画滚动冲突
- CSS3动画与单击冲突
- 脚本加载冲突?对象在包含Adobe Edge动画时没有方法错误
- jQuery嵌套动画冲突
- Jquery传输不透明度动画冲突
- 如何将.animate更改为.css,这样它就不会与CSS3动画发生冲突