jQuery嵌套动画冲突
jQuery nested animation conflict
我用下面的代码创建了一个简单的多级推送菜单:
HTML<li class="mobile_main_menu_headers">
<h3 class='expand'>Top</h3>
<ul class="mobile_main_menu_sub">
<li class="mobile_main_menu_sub_back">Back</li>
<li><a href="">Sub</a></li>
<li><a href="">Sub</a></li>
<li><a href="">Sub</a></li>
</ul>
</li>
jQuery $(".mobile_main_menu_headers").click(function(){
$(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});
$('.mobile_main_menu_sub_back').click(function(){
$(this).parent('ul').animate({left:'100%'});
});
问题是当点击.mobile_main_menu_sub_back
时,动画确实转到left: 100%
,但随后立即跳转回left: 0px
。我已经创建了一个简单的jsfiddle,您可以在这里查看:
点击Top文本可以看到动画向左滑动。然后点击返回文本查看问题。
我只是想让返回按钮使ul向右移动,就这样。
谢谢
您可以简单地停止事件传播从冒气泡向上通过返回false从背面的事件处理程序li
:
$(".mobile_main_menu_headers").click(function(){
$(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});
$('.mobile_main_menu_sub_back').click(function(){
$(this).parent('ul').animate({left:'100%'});
return false;
});
或者,jQuery有一个函数就是这样做的event.stopPropagation():
阻止事件从冒泡到DOM树,阻止任何父处理程序被通知事件
$(".mobile_main_menu_headers").click(function(){
$(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});
$('.mobile_main_menu_sub_back').click(function(e){
$(this).parent('ul').animate({left:'100%'});
e.stopPropagation();
});
你可以在这里阅读更多关于事件,事件传播,冒泡和更多。
尝试如下:
$(".expand").click(function(){
$('.mobile_main_menu_sub').animate({left:'0px'});
});
$('.mobile_main_menu_sub_back').click(function(){
$(this).parent('ul').animate({left:'100%'});
});
演示我已经更新了你的代码,使它简单,你为什么要这样写?因为一个特定的原因或者其他你没有包括在这里的功能?
编辑:如果你有多个菜单元素更新演示
$('.mobile_main_menu_sub_back').click(function(){
$(this).parent('ul').animate({left:'100%'});
event.stopPropagation(); //Add this line;
});
你的代码不工作的问题是:
您已经将点击事件绑定到.mobile_main_menu_headers,其中包含<li>
。所以当你点击<li>
中的反向链接时,即使是父.mobile_main_menu_headers
点击也是触发的。即事件正在冒泡
您可以通过以下方法解决此问题:
从容器。mobile_main_menu_headers中移除click事件,并将其绑定到。expand element。
$(".expand").click(function(){
$('.mobile_main_menu_sub').animate({left:'0px'});
});
stopeventpropagation,在'。Mobile_main_menu_sub_back '点击事件
$('.mobile_main_menu_sub_back').click(function(e){
e.stopImmediatePropagation();
$(this).parent('ul').animate({left:'100%'});
});
或
$('.mobile_main_menu_sub_back').click(function(e){
$(this).parent('ul').animate({left:'100%'});
e.stopPropagation();
});
相关文章:
- 如何设置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动画发生冲突