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>');
                }
            });
        });
    }
});