CODEWITHSUNDEEP
javascriptjquery
Gmz1023
Gmz1023

Reputation: 119

jquery fade then redirect

Alright, I maybe a bit to strung out from caffeine atm to figure this one out on my own, but i'm trying to figure out how to redirect visitors to a page after splash image has faded. 

$(document).ready(
function 
() 
{$('.wrapper a img').hover(
        function ()
        {
            $(this).stop().animate({ opacity: .4 } , 200);
            settimeout(function(){window.location = '/blog';}, 200); 
        }
)});

It's not working and is drving me a bit nutt

Upvotes: 1

Views: 134

Answers (1)

Jon
Jon

Reputation: 437414

.animate allows you to define a callback that will be invoked when the animation is complete:

$(this).stop().animate({ opacity: .4 } , 200, "swing", function() {
    window.location = '/blog';
});

The third argument ("swing") is simply the default for that parameter.

An alternative syntax for the same is

.animate({ opacity: .4 }, {
    duration: 200,
    complete: function() { window.location = '/blog'; }
);

Finally, yet another way is to use a .promise that will be completed when the animation queue for the element is empty (i.e. all animations have ended):

.animate({ opacity: .4 } , 200)
.promise().done(function() { window.location = '/blog'; });

Upvotes: 3

Related Questions