CODEWITHSUNDEEP
jqueryhtmljquery-animate
Desco
Desco

Reputation: 9

jQuery div doesn't animate properly

the code first.

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

The xdiv is inside the wrap2 div. The problem is, that the other wraps (3,4,5) also animate accordingly if I click on the wrap2 div, but not if I click on the "xdiv" to reset them. The animation starts, but rerolls immediately to the attributes from the wrap2 click function. Here a jsFiddle example http://jsfiddle.net/yxtQ5/1/

Upvotes: 0

Views: 62

Answers (2)

jacouh
jacouh

Reputation: 8741

Or this variant works also for me:

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

Upvotes: 0

Manish
Manish

Reputation: 1447

The problem is your xdiv is wrapped in wrap2. So when you click xdiv its parent is notified of the click event.

Either pull the xdiv out of wrap2 or use stopPropagation()

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

 });

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

Upvotes: 1

Related Questions