CODEWITHSUNDEEP
javascriptjquery
Richard Denton
Richard Denton

Reputation: 1042

Navigate to href when animation ends

So i'm trying to make a section fade out before following a link like so

<a class="fadelink" href="path/to/file">Hello</a>

<script type="text/javascript">
        $("a.fadelink").click(function(e){
            e.preventDefault();         
            $("#content").fadeTo(400,0,function(){
                window.location.href = $(this).attr("href");

            });
        });
    </script>

Problem is, jQuery keeps returning me with "undefined" and 404's the redirect.

Upvotes: 1

Views: 10278

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

Your $(this) in $(this).attr("href") is pointing to $("#content") which is wrong. Move it into the right scope:

$("a.fadelink").on("click", function( evt ) {

   evt.preventDefault();   

   var goTo = $(this).attr("href");           // get href value of `this` anchor

   $("#content").fadeTo(400, 0, function() {
       window.location = goTo;                // Now you can use it
   });

});

Upvotes: 9

user1726343
user1726343

Reputation:

You're referring to the wrong this. The href attribute is present on the anchor, not the #content element.

$("a.fadelink").click(function(e){
    e.preventDefault();
    var that = this;
    $("#content").fadeTo(400,0,function(){
        window.location.href = $(that).attr("href");

    });
});

Upvotes: 2

Related Questions