在jquery动画期间div闪烁

Question

我想做这样的事情:有两个div并排.当我将鼠标悬停在第一个div上时,其宽度变为55%,另一个div宽度变为45%,而另一个div则发生同样的情况.这里是jsfiddle:https://jsfiddle.net/wjs5w11c/

我的问题是div在动画期间闪烁.

我在chrome上尝试了这个,当窗口完全最大化时工作正常但是当我调整窗口大小时,闪烁再次开始.

请有人帮帮我.

我的代码:

$(document).ready(function(){
    $("#left").hover(function(){
        $("#left").animate({width:"55%"},50);
        $("#right").animate({width:"45%"},50);
    },function(){
        $("#left").animate({width:"50%"},50);
        $("#right").animate({width:"50%"},50);
    })
})

$(document).ready(function(){
    $("#right").hover(function(){
        $("#right").animate({width:"55%"},50);
        $("#left").animate({width:"45%"},50);
    },function(){
        $("#right").animate({width:"50%"},50);
        $("#left").animate({width:"50%"},50);
    })
})

#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    height:683px;
}
#left, #right {
    display:block;
    width: 50%;
    float:left;
    height:100%;
}
#left {
    background:blue;
}
#right {
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<div id="wrapper">
    <div id="left" class="content_left">LEFT</div>
    <div id="right" class="content_right">RIGHT</div>
</div>

Answer 1

如何使用CSS3 Transition:

#left, #right {
    /* other styles */
    transition: width 0.5s ease-in-out;
}

我将其设置为0.5秒,因此它更加明显,当然可以将其更改为0.05秒.

在jQuery中:

$(document).ready(function(){
    $("#left").hover(function () {
        $("#left").css({width: "55%"});
        $("#right").css({width: "45%"});
    }, function () {
        $("#left").css({width: "50%"});
        $("#right").css({width: "50%"});
    });

    $("#right").hover(function () {
        $("#right").css({width: "55%"});
        $("#left").css({width: "45%"});
    }, function () {
        $("#right").css({width: "50%"});
        $("#left").css({width: "50%"});
    });
});

jsfiddle DEMO