Question

我正在尝试延迟jquery悬停事件。下面的代码是我正在使用的代码。

bytes[]

我尝试将其更改为以下代码无效。

$(document).ready(function(){

        $('ul.tabs li').hover(function(){
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        })

    })

这是我的HTML代码

 var delay=1000, setTimeoutConst;
    $('ul.tabs li').on('hover', function() {
         setTimeoutConst = setTimeout(function(){
               var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');

         }, delay);
    }, function(){
         clearTimeout(setTimeoutConst );

      });

我仍然是jquery的初学者所以我不知道该怎么做。一些帮助将有所帮助。感谢

Answer 1

使用on('hover')是一个坏主意，您应该使用.hover()或on('mouseenter')和on('mouseleave')。

下面的代码对我有用，请注意你不能在超时函数中使用this，将id存入变量会解决这个问题。

如果鼠标在延迟过期之前离开，我假设您要取消超时，这就是我删除mouseleave上的超时的原因。

http://jsfiddle.net/k4wm1jr5/19/

var delay=1000, setTimeoutConst;
var tab_id, tab_id_this;

$(document).on("mouseenter", "ul.tabs li", function() {
     console.log("MOUSEENTER");
     tab_id = $(this).attr('data-tab');
     tab_id_this = $(this).attr('id');
     setTimeoutConst = setTimeout(function(){
               //Do whatever you like here
               //your code would be approximate like this:

               $('ul.tabs li').removeClass('current');
               $('.tab-content').removeClass('current');

               $("#"+tab_id_this).addClass('current');
               $("#"+tab_id).addClass('current');
      }, delay);
});
$(document).on("mouseleave", "ul.tabs li", function() {
    clearTimeout(setTimeoutConst );
});

on('hover')是一个坏主意，因为：

在jQuery 1.8中不推荐使用，在1.9中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。它附单这两个事件的事件处理程序，处理程序必须检查 event.type，用于确定事件是mouseenter还是mouseleave。不要将“hover”伪事件名称与.hover（）方法混淆，它接受一个或两个功能。

请参阅documentation。

Answer 2

我会使用$.hoverDelay() plugin来做到这一点。它允许您配置＆＃39; in＆＃39;的延迟。和＆＃39; out＆＃39;像这样的事件：

$('ul.tabs li').hoverDelay({
  delayIn: 200,
  delayOut:700,
  handlerIn: function($element){
    $element.css({backgroundColor: 'red'});  
  },
  handlerOut: function($element){
    $element.css({backgroundColor: 'auto'});  
  }
});

如何延迟jquery悬停事件

2 个答案: