javascript - 查询/CSS : How to apply addClass with a delay of 1 sec on mouseenter event.

Question

这是我的 addClass 代码，它正在运行。 但是当我尝试使用 delay 或 setTimeout 函数时，它不起作用。

我不想在 CSS 中使用 webkit 属性。

如果有人早些时候遇到过这个问题，请告知。

  $(document).ready(function(){
          $('#table_Id tr td').mouseenter(function(){ 
               $(this).parent('tr').addClass('blueBgColor'); 
            });
  });

Answer 1

使用setTimeout ，它会在指定延迟后调用函数或执行代码片段。

$(document).ready(function() {
    $('#table_Id tr td').mouseenter(function() {
        var self = this; //Cache this in a variable
        setTimeout(function() {
            $(self).parent('tr').addClass('blueBgColor');
        }, 1000); //Here delay in milliseconds
    });
});

编辑:bind 的用法

$(document).ready(function() {
    $('#table_Id tr td').mouseenter(function() {
        setTimeout(function() {
            $(this).parent('tr').addClass('blueBgColor');
        }.bind(this), 1000); //Here delay in milliseconds
    });
});