如何在鼠标结束时改进此动画效果循环播放

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});
        }
    );
});

希望这有帮助！ ：）

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);

    });

});

fiddle