0

我编写了以下功能，该功能部分有效。鼠标进入悬停动画不起作用，但鼠标离开动画起作用。据我从文档中可以看出，它是正确编写的，但我看不出有什么问题。有任何想法吗？:)

function hoveranim (){

        $(this).hover(function() {

             $(this).animate({left: '+=260px'}, '6000');

        },

        function() {

            $(this).animate({left: '-=260px'}, '6000');

             }
         )};

        $('div#feedback-form-container').on('hover', hoveranim);
4

1 回答 1

2

您正在hover事件中调用您的函数。这意味着一旦hoveranim()函数生效，hover事件已经过去了，这意味着它不会起作用，而 mouseout会。

我建议你将它重写为一个扩展 jQuery 的函数（它也允许链接，可能会派上用场）

jQuery.fn.hoveranim = function () {
    $(this).hover(function() {
         $(this).animate({left: '+=260px'}, '6000');

    },
    function() {
        $(this).animate({left: '-=260px'}, '6000');
         }
     )};

然后像这样绑定到它，在文档就绪事件（' $(document).ready）中

$('div#feedback-form-container').hoveranim();

请参阅此Fiddle以获取演示。

PS：请注意，当您为移动元素设置动画时，当您将元素从光标下方移开时，您会自动触发 mouseout 事件。请参阅我的小提琴以获得（可能不需要的）效果。

为了避免这种情况，我建议引入第二个元素，该元素将保持静态，最好是不可见的（尽管它仍然应该是块元素）并且位于要移动的元素上方。然后重写函数以接受可选elem参数，指定悬停该元素时要移动的元素。

我已经在另一个 Fiddle中解决了这个问题（这里有一个不可见的 hover_check）

于 2012-11-20T11:09:34.543 回答