Question

我有以下我写的部分工作的功能。鼠标离开动画时，鼠标输入悬停动画不起作用。据我所知，从文档中可以正确编写，但我看不出有什么问题。有任何想法吗？：）

function hoveranim (){

        $(this).hover(function() {

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

        },

        function() {

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

             }
         )};

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

Answer 1

您正在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参数，指定当该元素悬停时要移动的元素。

我已经在another Fiddle（and here it is with an invisible hover_check）

中解决了这个问题

jQuery .hover鼠标输入不起作用

1 个答案: