JQuery animate() & inconsistency in Chrome and Firefox - firefox

Question

I am doing a jQuery animation of 3 boxes, the effect is like the jsfiddle link below:
Fiddle
Basically when clicked on each color box the corresponding box will enlarge to width 100% taking up all width. And when clicking close (yes, it is not functioning well) the box will shrink back to its original position.
What I encountered now is
When enlarging the pink or the blue box, sometimes the yellow box on RHS will jump to next row (but just a very quick jump, i dunno why). It happens only in Chrome, looks perfect in Firefox.
When clicking the close button, it will trigger the yellow box to
enlarge (supposed it has taken up 0% of width? Why the bind click
still works?
Could someone advise how I should solve these and is there a better way for me to achieve the 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;
}

Answer 1

Problem 1 maybe due to rounding up calculation of 33.333% which make the total width of 3 container slightly larger than 100%. Changing them to pixel might help.
Problem 2 is due to event bubbling, it will trigger click event of .btn_group after .btn_close
Add event.stopPropagation(); will help solving this.
$('.btn_close').bind('click', function () {
$('.btn_group').animate({
width: "33.333%",
height: "220px"
});
$('.btn_group .content').hide();
$('.btn_close').hide();
event.stopPropagation();
});