jquery - .slideUp() on complete not working -



jquery - .slideUp() on complete not working -

i've created overlay image when hovered over. overlay consist of <div> opacity covering whole image , little box slides bottom. thing reverts normal when mouse leaves image.

this works fine, i'm trying add together complete: callback box @ bottom slide downwards 1 time has completed it's first slideup animation prevent looping.

here have tried far not seem doing trick:

$('.overlay-wrapper').mouseenter(function(){ // variables set here overlaybottom.slideup({ complete: function(){ $('.overlay-wrapper').mouseleave(function(){ $self.find('.overlay-bottom').slidedown(); }); } }); });

i'm sure why isn't working i'm calling mouseleave event 1 time slideup complete.

here jsfiddle mockup live preview:

http://jsfiddle.net/8hnpb/1/

can please shed lite i'm doing wrong?

try next http://jsfiddle.net/8hnpb/3

$('.overlay-wrapper').mouseenter(function(){ var $self = $(this); var overlay = $self.find('.overlay'); var overlaybottom = $self.find('.overlay-bottom'); var imagewidth = $self.find('img').width(); overlay.stop().removeclass('active', 200).width(imagewidth); overlaybottom.slidedown(); overlaybottom.width(imagewidth); }); $('.overlay-wrapper').mouseleave(function(){ var $self = $(this); $self.find('.overlay').stop().removeclass('active', 200); $self.find('.overlay-bottom').stop(true, false).slideup('fast'); });

i move mouseleave out of finish , added stop not loop. if mouse leaves image box, slideup stop, slide downwards whatever position stopped at.

for more info on .stop() http://api.jquery.com/stop/

jquery slidedown slideup

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -