CODEWITHSUNDEEP
javascriptjquerysettimeout
Alphabetus
Alphabetus

Reputation: 309

setTimeout() returns Uncaught TypeError

i'm setting up the following .hover() function.

$(".portfolio_overlay").hover(function(){
 setTimeout(function(){
  $(this).fadeTo(750, 0.72, "swing", function(){});
 });
});

The console outputs the following error: 

Uncaught TypeError: Cannot read property 'display' of undefined
at ae (jquery-3.3.1.min.js:2)
at jquery-3.3.1.min.js:2
at Function.grep (jquery-3.3.1.min.js:2)
at j (jquery-3.3.1.min.js:2)
at w.fn.init.filter (jquery-3.3.1.min.js:2)
at w.fn.init.fadeTo (jquery-3.3.1.min.js:2)
at work.js:51

I expect to implement a setTimeout() before the fadeTo() to give a few ms before the :hover effect happens.

What am I missing here? Thanks in advance for your time.

Upvotes: 0

Views: 69

Answers (1)

Danny Buonocore
Danny Buonocore

Reputation: 3777

Try this:

$(".portfolio_overlay").hover(function(){
  var that = $(this);
  setTimeout(function(){
    that.fadeTo(750, 0.2, "swing", function(){});
  });
});

See this pen. Previously you were trying to access this in a different closure, so it was not the this you were expecting to get.

Upvotes: 2

Related Questions