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是wrap2 DIV中。問題是，其他wrap s（3,4,5）也相應地動畫，如果我點擊wrap2 div，但不是如果我點擊「xdiv」來重置它們。動畫開始，但立即重新點擊wrap2點擊功能的屬性。這裏有一個jsFiddle的例子http://jsfiddle.net/yxtQ5/1/

Answer 1

還是這個變種作品也對我來說：

$(".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; 
}); 

Answer 2

問題是你的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/