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.5s，这样更显眼，你当然可以把它改成 0.05s。

在 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

Answer 2

我认为这是一个并发问题。因为第二个 div 动画比第一个动画开始晚一点。

我已经像这样更改了 css 和动画：https://jsfiddle.net/wjs5w11c/6/

1. 仅对左侧 div 进行动画处理
2. 将第二个div的背景设置为wrapper
3. 不要为第二个 div 设置宽度，因为你不需要它

CSS：

html,body {
    margin:0;
    padding:0;
}


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

}
#left {
    width: 50%;
    background:blue;
}

JS：

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

Answer 3

更新：https://jsfiddle.net/wjs5w11c/7/ 增加动画时间

所以这是你的 JS 的问题， 当 JS 动画发生时，当光标移动时，动画再次开始发生

所以你要做的就是使用jquery stop()

这是更新的代码

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

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

这是更新的代码小提琴 https://jsfiddle.net/wjs5w11c/1/

Answer 4

我个人会针对不同的尺寸使用 CSS 过渡和属性类。您可以最大限度地减少浏览器重绘，从而获得更好的性能。

var leftDiv = document.getElementById('left'),
    rightDiv = document.getElementById('right');

$(document).ready(function(){
    $(leftDiv).on('mouseover', function(){
        $(rightDiv).addClass('expand-small');
        $(leftDiv).addClass('extract-small');
    });
    $(leftDiv).on('mouseout', function(){
        $(rightDiv).removeClass('expand-small');
        $(leftDiv).removeClass('extract-small');
    });
});

html,body {
    margin:0;
    padding:0;
}


#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    height:683px;
}
.content_left, .content_right {
    display:block;
    width: 50%;
    float:left;
    height:100%;
    -webkit-transition: width 50ms ease-in;
    -moz-transition: width 50ms ease-in;
    -o-transition: width 50ms ease-in;
    transition: width 50ms ease-in;
}

.expand-small{
    width: 55%;
}

.extract-small{
    width: 45%;
}

#left {
    background:blue;
}
#right {
    background:green;
}

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

一些有用的链接：

About CSS transitions

Why you should minimize browser repaints