javascript - 鼠标悬停时如何改善此动画效果循环播放

Question

我正在使用 jquery 移动一个 div。但还有一些地方需要改进

当鼠标靠近左边框时，div不断向右移动，然后向左移动。这是正常行为，因为对鼠标敏感的区域正在移动。你有什么建议来改进这个动画？

这是我的代码，这是一个 fiddle

var $content = $("#content");
var $main_container = $("#main_container");

    $content.hover(

    function () {
        $main_container.transition({
            x: '15px',
            y: '15px',
            width: '110px',
            height: '205px'
        }, 200);

    },

    function () {
        $main_container.transition({
            x: '0px',
            y: '0px',
            width: '95px',
            height: '190px'
        }, 200);

    });

});

我也尝试过 mouseenter 但结果相同:

$content.mouseenter(function() {
            $main_container.transition({ x: '15px', y: '15px', width: '205px', height: '205px' },200);
    }).mouseout(function() {
            $main_container.transition({ x: '0px', y: '0px', width: '190px', height: '190px' },200);
    });

Answer 1

当导致过渡的容器正在移动时，它显然会影响您的悬停，尤其是当容器远离鼠标指针时。我建议移动一个容器内的元素，并让该容器触发过渡。这样，容器永远不会移动，悬停保持稳定，动画将正常工作。

Here's a fiddle ，这是示例(显然您可以使容器透明，因此不可见):

HTML:

<div id="container">
    <div id="mover"></div>
</div>

CSS:

#container{
    width: 200px;
    height: 200px;
    background-color: #ccc;
}
#mover{
    width: 100px;
    height: 100px;
    background-color: orange;
}

JavaScript:

$(function(){
    $('#container').hover(
        function(){
            $('#mover')
                .stop(false, false)
                .transition({x:50, y:50});
        },
        function(){
            $('#mover')
                .stop(false, false)
                .transition({x:0, y:0});
        }
    );
});

希望对您有所帮助! :)