Clever Geek Handbook

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


source to share


1 answer


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:

+7


source






More articles:


All Articles