jquery - jQuery div 动画不正确

Question

先上代码。

HTML

<div class="wrap">
  <div class="logo">
    <img src="images/logo.png" alt="Fabian">
  </div>
</div>
<div class="wrap2">
  <div class="phone">
    <a href="#"><img src="images/phonewhite.png"  alt="Fabian "></a>
  </div>
  <div class="xdiv">
    <img src="images/x.png" alt="Fabian">
  </div>
</div>
<div class="wrap3"></div>
<div class="wrap4"></div>
<div class="wrap5"></div>

Javascript

$(".wrap2").click(function(){
    $(".wrap2").css("height","400px");
    $(".wrap3").animate({top:'570px'}, 500);
    $(".wrap4").animate({top:'740px'}, 500);
    $(".wrap5").animate({top:'910px'}, 500); 
    $(".xdiv").css("visibility","visible");                 
});
$(".xdiv").click(function(){                  
    $(".wrap2").animate({height:'170px'}, 500);
    $(".wrap3").animate({top:'340px'}, 500);
    $(".wrap4").animate({top:'510px'}, 10);
    $(".wrap5").animate({top:'680px'}, 10);
    $(".xdiv").css("visibility","hidden");
});

xdiv是在divwrap2里面。问题是，如果我点击 div，其他wraps (3,4,5) 也会相应地动画wrap2，但如果我点击“xdiv”来重置它们，则不会。动画开始，但立即重新滚动到wrap2click 函数的属性。这里有一个 jsFiddle 示例http://jsfiddle.net/yxtQ5/1/

Answer 1

问题是你的 xdiv 被包裹在 wrap2 中。因此，当您单击 xdiv 时，它的父级会收到单击事件的通知。

将 xdiv 从 wrap2 中拉出或使用 stopPropagation()

 $(".xdiv").click(function (e) {
        e.stopPropagation(); //stops parent handler from being notified of the event.
    //code here 

 });

jsfiddle http://jsfiddle.net/yxtQ5/4/

Answer 2

或者这个变体也适用于我：

$(".xdiv").click(function(){                  
    $(".wrap2").animate({height:'170px'}, 500);
    $(".wrap3").animate({top:'340px'}, 500);
    $(".wrap4").animate({top:'510px'}, 10);
    $(".wrap5").animate({top:'680px'}, 10);
    $(".xdiv").css("visibility","hidden");
    return false;
});