1

基本上我有两个 jQuery 包装元素$source，垫片/占位符$target在哪里。$source

我想动画$source到$target. 动画之后我正在做一个$target.replaceWith($source);

无论在 DOM 中的什么位置$source，我都需要能够做到这一点。$target有没有一个jQuery插件/简单的方法来完成这个？

至于我要解决的问题，我有两个列表，我试图将最后一个项目从一个列表动画到另一个列表的开头。

这是我的尝试：

var moveItem = function ($sourceItem, $targetItem, callback, before) {
        var targetCord = $targetItem.css('position', 'absolute').offset();
        $targetItem.css('position', 'static');
        var sourceCord = $sourceItem.position();
        $targetItem[before? 'before': 'after']('<li class="shim"></li>');
        //diag('Shim Created.');
        var $newlyAddedShim = $targetItem[before ? 'prev' : 'next']();

        $sourceItem.css('position', 'absolute')
            .css({ left: sourceCord.left, top: sourceCord.top })
            .animate({ left: targetCord.left, top: targetCord.top }, 'slow', function () {
                $newlyAddedShim.replaceWith($sourceItem.css('position', 'static'));
                callback();
            });
    };

如果无法使用通用解决方案，这就是我被限制在不同位置和不同$source位置的标记结构：$targetliul

div.row > div.col > ul > li
          div.col > ul > li

（每个相邻的涉及列表都在它自己的 div.col 中；位置作为静态继承）

我希望能够做到： $source.animateTo($target)

4

1 回答 1

1

使用 jQuery 的 $.offset 函数 http://api.jquery.com/offset/

var offset = $('#containerToMoveTo').offset();

$('#elementToAnimate').animate({
   top: offset.top,
   left: offset.left
});

应该这样做，如果没有，请尝试在动画之前给#elementToAnimate绝对位置。

$('#elementToAnimate').css('position', 'absolute');
于 2013-07-10T15:56:11.023 回答