1

我创建了一个链接，当用户悬停在其中时，会弹出一些图像，当他们悬停时，图像会消失。一切工作正常，但是，当他们多次将鼠标悬停在链接上时，图像将继续弹出直到完成，具体取决于他们悬停链接的次数。有没有办法延迟悬停事件的执行以防止这种情况发生？我的代码如下

$('.my_link a').bind('mouseover', function () {
    var my_title = $(this).html();
    var title_width = parseInt($(this).width());
    var next = $(this).next();

    $.ajax({
        type: "POST",
        url: 'ajax/my_info_hover.php',
        data: {
            my_title: my_title
        }
    }).success(function (data) {
        //Disable mouseover from this class?
        $('.my_info_wrap').remove();
        $(next).html(data).css('left', title_width + 10 + 'px');
    });

}).mouseout(function () {
    //Enable mouseover again?
    $('.my_info_wrap').remove();
});
4

2 回答 2

1

我会做这样的事情：

var element = '#elementId';

var enter = function () {
 console.log('entered');
 $(element).stop().fadeIn('fast');
}

var leave = function () {
 console.log('left');
 $(element).stop().fadeOut('slow');
}

$('.toHoverOn').hover(function(){leave()}, function(){enter()});

请注意，您可以替换个人leave和enter函数，只需立即在回调中编写您的逻辑，即：

  var element = '#elementId';

    $('.toHoverOn').hover(function(){
      console.log('entered');
      $(element).stop().fadeOut('slow');
    }, function(){
       console.log('left');
       $(element).stop().fadeIn('fast');
    });

如果您的 'mouseenter/hover' 和 'mouseleave' 事件中发生了很多事情，第一个会更有用。

于 2017-03-20T13:30:35.277 回答
0 
$(document).ready(function () {
    var timer, $this;
    $('.my_link a').bind('mouseover', function () {
        clearTimeout(timer);
        $this = $(this);
        timer = setTimeout(function () {
           var anime_title = $this.html();
           var title_width = parseInt($this.width(), 10);
           var next = $this.next();

           $.ajax({
                type: "POST",
                url: 'ajax/my_info_hover.php',
                data: {
                    my_title: my_title
                }
            }).success(function (data) {
                //Disable mouseover from this class?
                $('.my_info_wrap').remove();
                $(next).html(data).css('left', title_width + 10 + 'px');
           });
           console.log("This works!");
        }, 1000); //function fires after 1000ms = 1s
    }).mouseout(function () {
        //Enable mouseover again?
        clearTimeout(timer);
        $('.my_info_wrap').remove();
    });
});

SetTimeout函数等待特定时间，然后执行其中的函数。clearTimeout 清除计时器。因此，每当用户将鼠标悬停在链接上时，计时器就会开始，如果他再次这样做，计时器就会被清除并立即开始新的。当然，当用户离开链接时，必须清除计时器。在上面的示例中，函数在 1 秒后触发。

但我更喜欢.on()而不是 bind。因此，您只需将 bind 替换为 .on

$('.my_link a').on('mouseover', function () {
    ...
}).mouseout(function() {
    ...
});

编辑

在这里工作jsfiddle ...以及另一个使用 .on() 而不是 .bind() 的版本

于 2013-04-28T19:26:06.160 回答