Question

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);

Answer 1

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:

• http://jsfiddle.net/mF46t/