Question

<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn("slow");
    $("a.link").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut("slow", redirectPage);        
    }); 
    function redirectPage() {
        window.location = linkLocation;
    }
});
</script>

It does not work “fadeOut” when using “onclick”. As can be implemented without using the “href”?

<a class="link" onclick="window.location='index.php'">index.php</a>

Answer 1

You script works with this:

<a class="link" href="http://google.de">index.php</a>

It fades out the “body” and afterwards it redirects to google.

It also works without the href:

<a class="link">index.php</a>

In this case it will just “refresh” the current page.

If you don’t want to store the link within the href-attribute, you can do this:

<a class="link" data-link="index.php">index.php</a>

This is valid HTML and you can, instead of the href-attribute read the new one:

$(this).attr('data-link');

You don’t have to set another “onclick” handler within the link. Because this one will fire first, before the jQuery event handler gets it’s work done.