Анимационный элемент от начального положения до положения другого элемента

Question

В основном у меня есть два обернутых jQuery элемента $source и $target, где $source - это прокладка/заполнитель.

Я хочу анимировать $source на позицию $target. После анимации я делаю $target.replaceWith($source);

Мне нужно иметь возможность делать это независимо от того, где $source и $target находятся в DOM. Есть ли плагин 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 

(Каждый смежный включенный список находится в собственном div.col; положение наследуется как статическое)

Я хотел бы быть в состоянии сделать: $ .offset функция $source.animateTo($target)

Answer 1

Используйте JQuery в http://api.jquery.com/offset/

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

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

Если это сделать, если нет, то попробуйте дать позиция #elementToAnimate абсолютное право, прежде чем анимировать.

$('#elementToAnimate').css('position', 'absolute');