Mouse function, timeout function does not work

Question

Mouse function, timeout function does not work

mouse after two seconds but timeout function doesn't work

Js

setTimeout(function () {
  $('.box').mouseover(function () {
    $(this).animate({
      marginTop: '-224px',
      height: '300px'
    })
    $(this).find('.rotate-arrow').addClass('rotate');
  });
}, 2000);

+3

jquery css

Prashobh Feb 19 '13 at 9:11

source to share

1 answer

Michael Zaporozhets · Accepted Answer · 2013-02-19T09:14:07+0000

Explanation:

You have attached an event handler to the inner space of setTimeout, which essentially means it will wait 2 seconds before attaching the function to the mouseover

element .box

.

Unfortunately, $(this)

the setTimeout function is out of scope so your values are not readable. Fortunately, you can simply assign to a $(this)

variable that is within the scope of the nested function, with which you can access the jquery object as usual.

Decision:

$('.box').mouseover(function () {
  var $this = $(this)
  setTimeout(function () {
    $this.animate({ marginTop: '-224px', height: '300px' })
    $this.find('.rotate-arrow').addClass('rotate');
  }, 2000);
});

jsFiddle:

http://jsfiddle.net/mF46t/

Mouse function, timeout function does not work

More articles: