Question

我有两个div并排浮动。默认情况下，它们的宽度均为50％。当您将鼠标悬停在div上时，活动div增长到70％，另一个div缩小到30％。

JS工作正常，除了我想用CSS添加缓动效果。当我添加CSS转换时，第二个div在mouseleave上中断（但只有当你将整个包装元素放在鼠标上时才会中断。）

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

有关如何解决此问题的任何建议？代码如下，但这里有一个小问题，可以看到问题的实际效果。

你只能通过将鼠标移出粉红色的盒子并完全从包装中取出来复制这个bug。

<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类比denver div类稍微快一点回到50％宽度。

这使得两个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);
    });

JQuery Animate和CSS转换冲突？

1 个答案: