jQuery - setTimeout not working with $(this).find

Question

What I am trying to do obviously is target a specific "gridWrap" element (the one being hovered over) and remove a class after 500ms but it doesn't seem to work.

Here is what I have

$(".gridWrap").mouseleave(function(){
  setTimeout(function(){
    $(this).find('.gridOverlay').removeClass('active');
  }, 500);
  $(this).find('.viewSite').removeClass('bounceInDown').addClass('bounceOutUp');
});

This works just fine but i need to delay the "active" class removal:

$(".gridWrap").mouseleave(function(){
$(this).find('.gridOverlay').removeClass('active');
$(this).find('.viewSite').removeClass('bounceInDown').addClass('bounceOutUp');
});

`setTimeout((function(){ $(this).find('.gridOverlay').removeClass('active'); }).bind(this), 500);` — Pranav C Balan, Mar 28 '19 at 18:48
`setTimeout(()=>{ $(this).find('.gridOverlay').removeClass('active'); }, 500);` — Pranav C Balan, Mar 28 '19 at 18:48
`let $this = $(this); setTimeout(function(){ $this.find('.gridOverlay').removeClass('active'); }, 500);` — Pranav C Balan, Mar 28 '19 at 18:48

score 0 · Answer 1 · answered Mar 28 '19 at 18:53

As mentioned before, the this context changes in timeout function. Try this one:

$(".gridWrap").mouseleave(function(){
  var self = $(this);
  setTimeout(function(){
    self.find('.gridOverlay').removeClass('active');
  }, 500);
  $(this).find('.viewSite').removeClass('bounceInDown').addClass('bounceOutUp');
});

score 0 · Answer 2 · answered Mar 28 '19 at 18:53

0

Create a variable for this before 'settimeout' it work well

answered Mar 28 '19 at 18:53

N.J.honey

44
3

jQuery - setTimeout not working with $(this).find

2 Answers2