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
Post a Comment