0

我在 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）两次？

4

1 回答 1

1

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

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

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

根据您尝试实现的效果，还有其他替代方案，包括将动画排队到孩子身上，并且仅在全部完成后附加数据。一种更粗略的方法也可能是延迟数据附加至少是动画时间（在本例中为 500 毫秒）的孩子长度的倍数。这实际上完全取决于您希望它看起来像什么，但不知何故，我希望简单的方法会很好。

PS您的选择器看起来很奇怪，但是由于您完全可以使用附加功能，因此我怀疑这只是本论坛目的的缩写形式或错字。否则肯定有问题。

于 2013-01-05T11:23:19.413 回答