JQuery animate() & inconsistency in Chrome and Firefox -

i doing jquery animation of 3 boxes, effect jsfiddle link below:

fiddle

basically when clicked on each color box corresponding box enlarge width 100% taking width. , when clicking close (yes, not functioning well) box shrink original position.

what encountered is

1. when enlarging pink or blue box, yellow box on rhs jump next row (but quick jump, dunno why). happens in chrome, looks perfect in firefox.
2. when clicking close button, trigger yellow box enlarge (supposed has taken 0% of width? why bind click still works?

could advise how should solve these , there better way me achieve same results?

html

<div class="animatewrap"> <div id="btn_howtojoin" class="btn_group">     <div class="btn_close"></div>     <div class="content">content</div> </div> <div id="btn_judgecriteria" class="btn_group">     <div class="btn_close"></div>     <div class="content">content</div> </div> <div id="btn_prizeinfo" class="btn_group">     <div class="btn_close">close</div>     <div class="content">content</div> </div> <div class="clear00"></div> 

js

$(function () {   $('#btn_judgecriteria').bind('click', function () {     $(this).animate({         width: "100%"     }, function () {         $(this).animate({             height: "400px"         });         $('.btn_close').show();     });     $('#btn_prizeinfo').animate({         width: "0%"     });     $('#btn_howtojoin').animate({         width: "0%"     });  });  $('#btn_howtojoin').bind('click', function () {      $(this).animate({         width: "100%"     }, function () {          $(this).animate({              height: "400px"         });           $(this).find('.content').animate({             top: "40px"         });          $('.btn_close').show();      });      $('#btn_prizeinfo').animate({         width: "0%"     });     $('#btn_judgecriteria').animate({         width: "0%"     });  });   $('#btn_prizeinfo').bind('click', function () {      $(this).animate({         width: "100%"     }, function () {          $(this).animate({             height: "400px"         });          $('.btn_close').show();      });      $('#btn_howtojoin').animate({         width: "0%"     });     $('#btn_judgecriteria').animate({         width: "0%"     });  });  $('.btn_close').bind('click', function () {     $('.btn_group').animate({         width: "33.333%",         height: "220px"     });      $('.btn_group .content').hide();      $('.btn_close').hide(); }); }); 

css

.btn_group {     width: 33.3%;     height: 220px;     float: left;     cursor: pointer;     position:relative; }  #btn_howtojoin {     background: #fcb2b2 ;     width: 33.4%; }  #btn_judgecriteria {     background: #7acccb ; } #btn_prizeinfo {     background: #f1c348; }  .btn_group .content {     position:absolute;     top:-400px;     left:40px; } .btn_close {     position:absolute;     top:20px;     right:20px;     color:#fff;     width: 40px;     height:62px;     display:none; } 

problem 1 maybe due rounding calculation of 33.333% make total width of 3 container larger 100%. changing them pixel might help.

problem 2 due event bubbling, trigger click event of .btn_group after .btn_close

add event.stoppropagation(); solving this.

 $('.btn_close').bind('click', function () {         $('.btn_group').animate({             width: "33.333%",             height: "220px"         });          $('.btn_group .content').hide();          $('.btn_close').hide();         event.stoppropagation();   });