CODEWITHSUNDEEP
jquerycallbackjquery-animatehide
Wouter Florijn
Wouter Florijn

Reputation: 2941

jQuery .animate callback firing at start of animation

I have a question regarding the callback of the .animate function. I am trying to let an element fade out when the cursor leaves its parent. After fading out, the element should be hidden so you can't hover over it with the cursor or click it. However, the callback function which hides the element is called at the start of the animation instead of at the end. I've tried a lot of things but nothing worked. I can post all my code (it's not much, just a small homepage with some links I made for myself) if it's needed.

var fadeIn = {opacity: "1"};
var fadeOut = {opacity: "0"};

$(".link-main").hover(function(){
    $(this).children(".link-sub").css("z-index", "10").show().animate(fadeIn, 100);
}, function(){
    // The animation.
    $(this).children(".link-sub").animate(fadeOut, 100, "swing", function(){
        $(this).hide();
    });
});

Also, simply using .fadeIn and .fadeOut didn't work for whatever reason. The elements would just disappear instantly.

Thanks in advance!

Edit: this is what I have right now jsfiddle.net/rqfcZ

Upvotes: 1

Views: 215

Answers (2)

Akki619
Akki619

Reputation: 2432

@Frederic Hamidi My bad.... apologies

Please visit this link for resolution

http://fisherwebdev.com/wordpress/2009/06/08/scope-issues-with-the-callback-to-jquerys-animate-function/

A quick look on above link and came to conclusion that you need to add a ref variable to this.

Upvotes: 0

Paolo Casciello
Paolo Casciello

Reputation: 8202

.fadeIn and .fadeOut does the .show() and .hide() themselves. Try removing them and not using animate.

Just $(element).fadeOut()

Also for the events, you're using old jquery syntax. Take a look at the docs for .on()

Upvotes: 2

Related Questions