我想做这样的事情:有两个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>