JQuery Animate 和 CSS 过渡冲突？

Question

我有两个 div 并排 float 。默认情况下，它们各占 50% 宽度。当您将鼠标悬停在一个 div 上时，事件 div 会增长到 70%，而另一个 div 会缩小到 30%。

JS 工作正常，除了我想用 CSS 添加缓动效果。当我添加 CSS 过渡时，第二个 div 在 mouseleave 时中断(但仅当您用鼠标移动整个包装元素时。)

我的猜测是组合宽度暂时大于 100%，迫使第二个 div 被推到第一个 float div 下面。

关于如何解决这个问题有什么建议吗？代码在下面，但这里有一个 fiddle 可以查看实际问题。

http://jsfiddle.net/gFf3n/1/

您只能通过将鼠标移出粉红色框并完全移出包装来复制错误。

<div class="wrapper">
    <div class="vail">
        <p class="overview"> I work always </p>
    </div>
     <div class="denver"> 
       <p class="overview"> I break when you mouseleave outside of the box, but work when you mouseleave over to the blue box </p>
    </div>
</div>

var $targets = $('.vail, .denver');
$targets.hover(function() {
    $(this).parent().children().not(this).animate({
        width: "30%"
    },  0);
    $(this).animate({
        width: "70%"
    }, 0);
    $(this).parent().children().not(this).find('.overview').hide();
    $(this).find('.overview').show();
});

$targets.mouseleave(function() {
    $('.overview').hide();
    $targets.animate({
        width: "50%"
    }, 0);
});

.wrapper {
    width: 600px; 
}
.overview {
    display: none;
}
.vail {
    transition: all 0.9s ease;
    background-color: blue;
    color: #fff;
    float: left;
    height: 300px;
    width: 50%;
}
.denver {
    transition: all 0.9s ease;
    background-color: pink;
    float: left;
    height: 300px;
    width: 50%;
}

Answer 1

我认为问题在于，当您离开 denver div 类时，vail div 类回到 50% 宽度的速度比 denver div 类稍快。

这使得两个 div 的总和超过 100%，并且它们不会彼此相邻。 我试过了，在鼠标离开时打破 div 没有问题。 希望这就是您要找的。

var $targets = $('.vail, .denver');
    $targets.hover(function() {
        $(this).parent().children().not(this).animate({
            width: "30%"
        },  0);
        $(this).animate({
            width: "70%"
        }, 0);
        $(this).parent().children().not(this).find('.overview').hide();
        $(this).find('.overview').show();
    });

    $targets.mouseleave(function() {
        $('.overview').hide();
         $(this).animate({
               width: "50%"
           }, 0);

        $(this).parent().children().not(this).animate({
                width: "50%"
            }, 0);
    });