I want to display:none if user hovers my banner for 500ms, but the following JQuery code is not working. Where is mistake?

$('.banner').hover(function() {

      setTimeout(function(){

      $(this).css('display','none');

    }, 500);
}); 

I want to display:none if user hovers my banner for 500ms, but the following JQuery code is not working. Where is mistake?

$('.banner').hover(function() {

      setTimeout(function(){

      $(this).css('display','none');

    }, 500);
}); 

• javascript
• jquery

• I want to display:none if user hover it with 500 miliseconds. What does that mean? Hovering for 500 ms? In any case, this inside the callback refers to window. – Felix Kling Commented Dec 12, 2011 at 19:33
• What do you mean by "not working?" – tvanfosson Commented Dec 12, 2011 at 19:34

7 Answers 7

You can't pass $(this) like that in an anonymous function. Set it to a variable instead

$('.banner').hover(function() {

    var banner = $(this);

    setTimeout(function() {

        banner.css('display', 'none');

    }, 500);


});

http://jsfiddle/fkjn6/

The this inside your setTimeout does not refer to the this in the hover function. You can cache the this in your hover function so that it can be used in the setTimeout function:

$('.banner').hover(function() {

      var $this = $(this);

      setTimeout(function(){

          $this.css('display','none');

    }, 500);
});

Here is a demo: http://jsfiddle/hVejj/

Update

var timer;
$('.banner').hover(function() {

      var $this = $(this);

      timer = setTimeout(function(){

          $this.css('display','none');

    }, 500);
},
function () {
    clearTimeout(timer);
});

Here is a demo for this update: http://jsfiddle/hVejj/1/

If you want it to hide the banner when you've hovered over it for 500ms, then you need to save a reference to the DOM element being hidden. You probably also want to clear the timer if you've stopped hovering before the timeout fires. You'll need the signature that takes an in AND out handler separately. Store the timer handle and clear it when you stop hovering if it hasn't already expired.

var hoverTimer = null;
$('.banner').hover(function() { 
   var $banner = $(this);
   hoverTimer = setTimeout(function(){
                     hoverTimer = null;
                     $banner.css('display','none');
                }, 500); 
}, function() {
   if (hoverTimer) {
      clearTimeout(hoverTimer);
   }
   hoverTimer = null;
});

You need to give the callback function access to the right this variable:

$('.banner').hover(function() {
      var temp = this;
      setTimeout(function(){
      temp.css('display','none');
    }, 500);
}); 

The following code will hide the banner after the user hovers for more than 500 ms:

var timeout;
$('.banner').hover(
    var banner = $(this);

    // Hover In
    function() {
        timeout = setTimeout(function() { banner.hide(); }, 500);
    },
    // Hover Out
    function() {
        clearTimeout(timeout);
    }
);

If you're trying to do what I think, something like this should make it work:

var tmp_abort
$('.banner').mouseenter(function() {
    tmp_abort=setTimeout(function(){
        $(this).css('display','none');
    }, 500);
});   

$('.banner').mouseleave(function(){
    clearTimeout(tmp_abort)
});

`

Try this:

$('.banner').hover(function() {
  var me = $(this);
  setTimeout(function(){
    me.css('display','none');
  }, 500);
});

The this variable changes meaning based on scope. Once inside the the function in the setTimeout() call this no longer refers to the .banner element.

So you need to "save" that reference so you can use in the function in the setTimeout() call.