Question

基本上我有两个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和$target li ul中的div.row > div.col > ul > li div.col > ul > li：

$source.animateTo($target)

（每个相邻的列表都在它自己的div.col中; position作为静态继承）

我希望能够做到： {{1}}

Answer 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');

将元素从起始位置动画到另一个元素的位置

1 个答案: