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

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动画开始的时间稍晚于第一个。

我已经改变了css和动画：https://jsfiddle.net/wjs5w11c/6/

仅动画左侧div
将第二个div的背景设置为包装器
不要为第二个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>

一些有用的链接：

About CSS transitions

Why you should minimize browser repaints

在jquery动画期间div闪烁

4 个答案: