Title: preventDefault not working after fadeout then load then fadein new href content into div
Tags: javascript;jquery;html;preventdefault
Question: I've searched and serached and nothing really seems to answer what I'm looking for.

I'm pulling in html pages into a div.  I finally got it to fadeout, load new href content, then fade in the new content.  However, I can't get it to preventDefault on the link.

Here's my code.  Any help is greatly appreciated!

```$(document).ready(function() {

var url = $(this).attr("href"); 

$('#container').css('display', 'none');

$('#container').fadeIn(1000);

jQuery('a').click(function(e){
e.preventDefault();
$('a').removeClass('current');
$(this).addClass('current');    
$("#container").fadeOut('1000',function(){
$('#container').load(url);
}).fadeIn('1000');

        });

    })
```

Comment: What is `var url = $(this).attr("href");` doing outside the event?

Comment: Thanks for your quick response.  That code still allows the fadeout, load, and fadein to work (nicely coded, though); however, the links are still firing for the current page.

Comment: Try `$(document).ready(function () {
    $('#container').css('display', 'none').fadeIn(1000);
    jQuery(document).on('click', 'a', function (e) {
        e.preventDefault();
        $('a.current').removeClass('current');
        $(this).addClass('current');
        var url = $(this).attr("href");
        $("#container").fadeOut('1000', function () {
            $(this).load(url).fadeIn('1000');
        });
    });
})`


Here is another answer: You need to call this ```fadeIn``` inside the load callback.

```$(document).ready(function() {
    var loading = false;
    $('#container').css('display', 'none');
    $('#container').fadeIn(1000);

    $('a').click(function(e){
            if(loading) return false;
        e.preventDefault();
            loading = true;
        var url = $(this).attr("href"),
            cont = $("#container");  //cache selector
        $('a').removeClass('current');
        $(this).addClass('current');    
        cont.fadeOut(1000, function(){
            cont.load(url, function() {
                cont.fadeIn(1000, function() {
                    loading = false;
                });
            });
        });

    });
});
```

Comment for this answer: That still does the same thing, but when I click the link it's still fading out and fading in the current content.  Thanks for the response, though.
Comment for this answer: One thing I've noticed is that if I remove the fadeout and fadein, the preventDefault does work.  So, it must be something with that.  Hmmm...
Comment for this answer: Actually, the retun false killed the linking in general.  Darn!  Getting close, though.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:10/06/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><preventdefault>', 'Title': 'preventDefault not working after fadeout then load then fadein new href content into div', 'ViewCount': 444, 'id': 19204193, 'user_AboutMe': '', 'user_AccountId': 3312827.0, 'user_DisplayName': 'humandudeman', 'user_Reputation': 13.0, 'user_Views': 1.0, 'user_id': 2785848.0}}