jquery 解决事件监听动画延迟触发的问题

Posted 2020-09-30

上代码

<div id="small"></div>
<div id="large"></div>

 

#small{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 100px;
    left: 100px;
}

#large{
    width: 200px;
    height: 200px;
    background: purple;
    position: absolute;
    left: 500px;
    top: 300px;
}

 

$(function(){
    $("#small").mouseover(function(){
        $("#large").stop().animate({
            width: "1000px"
        });
    });

    $("#small").mouseout(function(){
        $("#large").stop().animate({
            width: "200px"
        });
    });
});

 

与其考虑怎么让动画执行过程中停下来，不如先让动画停下来再执行一次。