CODEWITHSUNDEEP
jquerycss
Prashobh
Prashobh

Reputation: 9544

Mouse over , set time out function is not working

mouse over after two seconds ,but set time out function is not working

js

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

Upvotes: 3

Views: 2954

Answers (1)

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24566

Explanation:

You have attached the event handler to inside of the setTimeout which essentially means that this will wait 2 seconds before attaching the function to a mouseover of the .box element.

Unfortunately $(this) from the setTimeout function is out of scope so your values were not being read. Luckily you can simply assign $(this) to a variable that is within the scope of the nested function with which you will be able to access the jquery object as you normally would.

Solution:

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

jsFiddle:

Upvotes: 7

Related Questions