CODEWITHSUNDEEP
javascriptjquery
user5483305
user5483305

Reputation:

Set timeout within hover function

I have content that is dynamically loaded. This content needs to be invoked in the following way due to it's dynamic nature.

This works perfectly if no setTimeout is used. Is there a way of setting a timeout of 0.25 seconds in this instance?

Fiddle https://jsfiddle.net/vuezt9dh/

Works

$(".wrapper").on({
  mouseenter: function() {
    $(this).find('.show-me').slideDown(150);
  },
  mouseleave: function() {
    $(this).find('.show-me').slideUp(0);
  }
}, '.main-page');

Doesn't work

$(".wrapper").on({
  mouseenter: function() {
    var $this = $(this);
    setTimeout(function() {
      $this.find('.show-me').slideDown(150);
    }, 250);
  },
  mouseleave: function() {
    $(this).find('.show-me').slideUp(0);
  }
}, '.main-page');

Upvotes: 0

Views: 54

Answers (1)

Kevin Lynch
Kevin Lynch

Reputation: 24703

Your targeting is incorrect, i'm suprised this works at all (didn't in my tests)

Demo https://jsfiddle.net/vuezt9dh/2/

Should be:

$(".main-page").on({
  mouseenter: function() {
    var $this = $(this);
    setTimeout(function() {
      $this.find('.show-me').slideDown(150);
    }, 550);
  },
  mouseleave: function() {
    $(this).find('.show-me').slideUp(0);
  }
}, '.wrapper');

Your wrapper and main-page were the wrong way around.

Upvotes: 1

Related Questions