CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3200593
user3200593

Reputation: 45

Jquery callback function not working to redirect page

How do I get the callback function on the 2nd line to redirect the user after the animation runs? I want it to redirect to the link in the href of 'nav li a'.

If I leave the callback as "" the animation works fine but does nothing (as expected). But if I put anything I think will work it fails and most of the time also breaks the first line from working at all. I'm just trying to get the page to slide in from it's starting offscreen position on load (1st line). Then slide out first then reload the page (2nd line).

$('section').animate({"left":"0px"}, 450);

$('nav li a').click(function () { $('section').animate({ "left": "1000px"}, 1000, "");
        return false;  
});

Upvotes: 0

Views: 170

Answers (2)

devlato
devlato

Reputation: 127

If I get your problem correctly, this code is doing what you need: 

var $section = $('section'); 
$section.animate({left: '0px'}, 450);
$('nav li a').click(function(e) { 
    var self = this; 
    e.stopPropagation(); 
    e.preventDefault(); 
    $section.animate({left: '1000px'}, 1000, function() {
        window.location = self.href; 
    });
});

Upvotes: 0

adeneo
adeneo

Reputation: 318222

Prevent the anchors default action, store a reference to the anchor as the callback for animate() creates a new scope, then just redirect :

$('section').animate({"left":"0px"}, 450);

$('nav li a').on('click', function(e) { 
    e.preventDefault();

    var self = this;

    $('section').animate({ "left": "1000px"}, 1000, function() {
         window.location.href = self.href;
    });
});

Upvotes: 1

Related Questions