Jquery/CSS：如何在 mouseenter 事件上延迟 1 秒应用 addClass。

Question

Here is my code to addClass which is working. But when I try to use delay or setTimeout functions, it is NOT working.

I don't want to use webkit attributes in CSS.

Please advise if anybody faced this issue earlier.

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

Answer 1

UsesetTimeout , it calls a function or executes a code snippet after a specified delay.

$(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
    });
});

EDIT: Usage of bind

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

Answer 2

hey i have created a jsfiddle for your problem...

code:-

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

Working example:-

http://jsfiddle.net/L7S37/14/

thanks

Answer 3

$(document).ready(function(){
  var myTimeout;
  $('#table_Id tr td').on("mouseenter", function(){
    var that = $(this);
    myTimeout = setTimeout(function () {
      that.parent('tr').addClass('blueBgColor');
    }, 1000);
  });
  // Also if you need, you can do:
  $('#table_Id tr td').on("mouseleave", function(){
    clearTimeout(myTimeout);
  });
});

OR:

$(document).ready(function(){
  var myTimeout;
  // use event.target
  $('#table_Id tr td').on("mouseenter", function (e) {
    myTimeout = setTimeout(function () {
      $(e.target).parent('tr').addClass('blueBgColor');
    }, 1000);
  });
});

Answer 4

You might want to use toggle class if not exists otherwise on every mouseenter the class will be added over and over:

$('#table_Id tr td').mouseenter(function(){
    $td = $(this);
    setTimeout(function(){$td.toggleClass('addedClass',true)},'1000');
});

js fiddle example

Answer 5

Try this

 $('#table_Id tr td').mouseenter(function(){
    var $this = $(this); 
    setTimeout(function () {
           $this.parent('tr').addClass('blueBgColor');        
   }, 1000);
});

Answer 6

Try this

$('#table_Id tr td').off('mouseenter').on('mouseenter', function() {
    var element = this;
    setTimeout(function() {
        $(element).parent('tr').addClass('blueBgColor');
    }, 1000); /*delay for 1 sec*/
});