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

Question

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

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

这是我的代码，这是一个小提琴

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

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

这是一个 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});
        }
    );
});

希望这可以帮助！:)

Answer 2

使用stop这将防止循环动画。

$(document).ready(function () {

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

    $content.hover(

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

    },

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

    });

});

小提琴