jQuery Ajax两次加载内容

I wrote simple load content by AJAX in jQuery:

$('.bar a[rel]').live('click', function() {
    if($('.modal-'+ $(this).attr('rel')).length == 0) {
        $.ajax({
            url: 'users/'+ $(this).attr('rel'),
            success: function(data) {
                $('header + .container').children().animate({
                    'height': 0,
                    'padding': 0,
                    'opacity': 0
                }, 500, function() {
                    $(this).remove();

                    $(data).hide().appendTo('header + .container').fadeIn(1000);
                });                 
            }
        });
    }

    return false;
});

Why this code load content (appendTo) twice?

The animation code is executed once for each of the children; you haven't provided your HTML, but since it runs twice, I think it's safe to assume there are two. Revise the function to work directly on the parent:

$('header + .container').animate({
    'height': 0,
    'padding': 0,
    'opacity': 0
}, 500, function () {
    $(this).empty();

    $(data).hide().appendTo('header + .container').fadeIn(1000);
});

Depending on the effect you are trying to achieve, there are other alternatives, which include queueing the animations on the children and only appending the data after all have completed. A cruder way could also be delaying the data append by at least the multiple of the length of children with the animation time (500ms in this case). It really all depends on what you want it to look like, but somehow I expect the simple approach will be fine.

P.S. You're selector looks strange, but since you got the append working at all I suspect that's just an abbreviated form for the purpose of this forum or a typo. Otherwise something's definitely wrong.