JQuery animate() & Chrome 和 Firefox 中的不一致答案

【问题标题】：JQuery animate() & inconsistency in Chrome and FirefoxJQuery animate() & Chrome 和 Firefox 中的不一致
【发布时间】：2014-10-11 13:15:18
【问题描述】：

我在做一个3个盒子的jQuery动画，效果就像下面的jsfiddle链接：

Fiddle

基本上，当单击每个颜色框时，相应的框会放大到 100% 的宽度，占据所有宽度。当点击关闭时（是的，它不能正常工作），盒子会收缩回原来的位置。

我现在遇到的是

当放大粉色或蓝色框时，有时 RHS 上的黄色框会跳到下一行（但只是一个非常快的跳跃，我不知道为什么）。它只发生在 Chrome 中，在 Firefox 中看起来很完美。
点击关闭按钮时，会触发黄色框放大（假设它占据了宽度的 0%？为什么绑定点击还能用吗？

有人可以建议我应该如何解决这些问题吗？有没有更好的方法让我达到同样的结果？

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>

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

【问题讨论】：

标签： firefox jquery-animate

【解决方案1】：

问题 1 可能是由于 33.333% 的四舍五入计算导致 3 个容器的总宽度略大于 100%。将它们更改为像素可能会有所帮助。

问题2是由于事件冒泡，在.btn_close之后会触发.btn_group的点击事件

添加 event.stopPropagation();将有助于解决这个问题。

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

        $('.btn_group .content').hide();

        $('.btn_close').hide();
        event.stopPropagation();
  });

【讨论】：