Question

我在jQuery中用AJAX编写了简单的加载内容：

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

为什么这段代码加载内容（appendTo）两次？

Answer 1

每个孩子都会执行一次动画代码;你没有提供你的HTML，但由于它运行了两次，我认为可以安全地假设有两个。修改函数以直接在父级上工作：

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

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

根据您尝试实现的效果，还有其他选择，其中包括对子项上的动画进行排队，并且仅在完成所有内容后附加数据。更粗略的方式还可能是将数据延迟至少具有动画时间的子项长度的倍数（在这种情况下为500ms）。这完全取决于你想要它的样子，但不知怎的，我希望简单的方法会很好。

P.S。你的选择器看起来很奇怪，但是由于你得到了追加工作，我怀疑这只是一个缩写形式，用于本论坛或打字错误。否则，某些事情肯定是错的。

Jquery ajax加载内容两次

1 个答案: