Jquery 鼠标悬停输入不工作

我编写了以下函数，该函数部分工作。“鼠标进入悬停”动画不起作用，但“鼠标离开”动画不起作用。据我所知，从文件上看，它写得很正确，但我看不出有什么错。有什么想法吗？：）

---

您正在

悬停

事件上调用函数。这意味着一旦

hoveranim（）

函数生效，

hover

事件就已经过去，这意味着它将不工作，而mouseout将工作

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

然后像这样绑定到文档就绪事件（'

$（document.ready

）中

看这个演示

PS：请注意，当您将元素设置为移动时，当您将元素移离光标下方时，会自动触发鼠标移出事件。看看我的小提琴，看看有没有（可能不想要的）效果

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

elem

参数，指定悬停此元素时要移动的元素

---

我已经在（）中解决了这个问题。

您正在对hover事件调用hover函数。这意味着，一旦hoveranim（）函数生效，悬停事件就已经过去了。谢谢你的提示！我明白你所说的鼠标移出事件是什么意思了。停止它的最好方法是什么？停止它就像不包含mouseout函数一样简单。但是你必须考虑元素什么时候向后移动。我要做的是引入第二个元素，位于要设置动画的元素的正下方，它是不可见的，并保持不变。然后将hoveranim（）函数绑定到该元素，并重写该函数以指向要移动的元素（而不是$（this））。对不起，第二个元素需要在顶部才能悬停。不管怎样，我刚刚为你创建了这个变体，请看我的编辑和副手。感谢你花时间写下精彩的解释@c_kick它帮了你很多忙！

function hoveranim (){

        $(this).hover(function() {

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

        },

        function() {

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

             }
         )};

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

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

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

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