using a fadeOut double the number of div

I have a problem with a fadeOut(). My <div>'s are multiplied by two if I use the fadeOut(), but if I just make the <div>'s appear directly (with no fade on the <div>'s), there's no problem. Do you know what I could do for that?

Here's the line that does not work (after a click, it gives me two <div>'s instead of one, then if I click again four <div>'s appear, etc.)

div.fadeOut().empty().append(content).fadeIn('fast', function(){

and the one that works (but I'd like to have the fadeOut though):

div.empty().append...

and the entire code:

$(document).ready(function(){
    var loader = $('#loading');
    var div = $("#provisoire");

    div.append($(".content:first").html()).css({'display':'block'});

    $(".plus").click(function(){
        var name = $(this).attr("rel");
        changeContent(name);
        return false;
    });

    function changeContent(name){
  开发者_开发技巧      var content = (name)?$("#"+name).html():$(".content:first").html();
        loader.fadeIn();
        $('html,body').animate({'scrollTop':0}, 600, function(){
            div.empty().append(content).fadeIn('fast', function(){ //*** here
                loader.fadeOut();
                if(name){
                    div.find('.childB').append('<a href="#" style="background:green;" class="retour">Retour</div>');
                    div.find('.retour').click(function(){
                        changeContent();
                        return false;
                    });
                }
                else {
                    $(".plus").click(function(){
                        var name = $(this).attr("rel");
                        changeContent(name);
                        return false;
                    });
                }
            });
        });
    }
});

With Tentonaxe's solution, try using either html or body on the following line:

 $('html').animate({'scrollTop':0}, 600, function(){

I think having both html and body defined might call the callback function twice.

try using the callback function of the fadeOut to empty and append content that way it isn't emptied and appended before it is done fading out:

div.fadeOut('fast',function(){
  div.empty().append(content).fadeIn('fast',function(){
    ...
  });
});

Edit: Also, your primary problem, bind to the .plus class using .live('click') and only do it once, preferably outside of the $(document).ready(), however that would take some rearranging.

$(document).ready(function(){
    var loader = $('#loading');
    var div = $("#provisoire");

    div.append($(".content:first").html()).css({'display':'block'});

    $(".plus").live('click',function(){
        var name = $(this).attr("rel");
        changeContent(name);
        return false;
    });
    $('.retour').live('click',function(){
      changeContent();
      return false;
    });

    function changeContent(name){
        var content = (name)?$("#"+name).html():$(".content:first").html();
        loader.fadeIn();
        $('html,body').animate({'scrollTop':0}, 600, function(){
            div.empty().append(content).fadeIn('fast', function(){ //*** here
                loader.fadeOut();
                if(name){
                    div.find('.childB').append('<a href="#" style="background:green;" class="retour">Retour</div>');
                }
            });
        });
    }
});