jquery 动画换行与追加

Question

我有以下 jQuery:

        var container = $(this),
            list = container.children('ul'),
            wrapper = $('<div class="wrapper"></div>');

        list.wrap(wrapper);

        var top = 0 - list.height();
        wrapper.animate({ 'top':  top + "px" }, options.animationSpeed, function () {
        });

但这不会为包装器设置动画，但是，如果我使用以下内容而不是 .wrap

        container.append(wrapper.append(list));

动画将会起作用。

为什么第二个版本可以工作，而第一个版本却不能？

Answer 1

这是因为 wrapper 的标记被复制到 DOM 中，并且列表被附加到副本中，而不是附加到原始 wrapper 对象，后者保留在 DOM 之外.

显式引用列表的新父级应该可以解决您的问题:

list.parent().animate({
    top: top + "px"
}, options.animationSpeed, function() {
});