jQuery slideup and down feature delay

Question

I have a few images with a div and header on it that when mouse entering it slides up and leaving vise versa. It works, however the slidedown doesn’t happen right away. So, if I hover the mouse over it a few times quickly (lets say 10 times) it will slide up and down for like 30 seconds. I know there is something wrong in my code. Any ideas?

$(document).ready(function(){ $('.indexgall').on('mouseenter',function(){ $(this).addClass('hoverimg'); $(this).children().animate({ top:150 },600,function(){ }); }); $('li').on('mouseleave',function(){ $(this).removeClass('hoverimg'); $(this).children().animate({ top:250, },600,function(){ }); $(this).stop().animate({}); }); }); // END DOCMENT READY

.hoverimg { box-shadow: .2% .2% .2% gray; /*2px 2px 2px gray */ opacity: 0.8; }

JsFiddle

You have to use .stop() for animated children. BTW, $(this).stop().animate({}); doesn't make much sense — A. Wolff
– A. Wolff, Commented Dec 11, 2014 at 20:34
JSfiddle posted :) and i took out the (stop) but same thing. — arsenalist
– arsenalist, Commented Dec 11, 2014 at 20:38

John S · Accepted Answer · 2014-12-11 20:46:29Z

Animations queue up when called on the same element. You should call .stop() before you call .animate().

$(this).children().stop().animate({

Collectives™ on Stack Overflow

jQuery slideup and down feature delay

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related