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演示

Answer 2

更新： 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 3

我認為這是一個並發問題..因為第二個div動畫比第一個div稍晚開始。

我已經更改了CSS和動畫，如下所示： https : //jsfiddle.net/wjs5w11c/6/

1. 僅對左div進行動畫處理
2. 將第二個div的背景設置為包裝器
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 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> 

一些有用的鏈接：

關於CSS過渡

為什么要減少瀏覽器重繪