CODEWITHSUNDEEP
jqueryfunctionhoverdelaymouseenter
user2906953
user2906953

Reputation: 3

Delaying mouseenter function

I know there's a lot of questions about this one but I just can't get it to work with my script.

I want to delay my hover-effect by a split second so that my buttons don't twitch around when you move the pointer across the screen.

I tried setTimeout like this:

$("#picnav ul li a").mouseenter(function () {

   setTimeout(function() {

      $(this).animate({ 
        'padding-top' : 191,
        'padding-right' : 0, 
        'padding-bottom' : 60, 
        'padding-left' : 0  
        }, '3000', "easeInOutQuint");

    }, 500);

    }).mouseleave(function () {
      $(this).animate({ 
        'padding-top' : 60,
        'padding-right' : 0,
        'padding-bottom' : 191,
        'padding-left' : 0,
      }, '3000', "easeInOutQuint");
});

but I keep getting the message "Cannot use 'in' operator to search for 'paddingTop' in undefined"

What am I missing here?

If you wanna check the site out you can do so here

Upvotes: 0

Views: 39

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

$(this) inside setTimeout will not refer to the actual element

you can make it work like this -

$("#picnav ul li a").mouseenter(function () {
   var $this = $(this);
   setTimeout(function() {
      $this.animate({

Upvotes: 3

Related Questions