動畫元素從開始位置到另一個元素的位置

基本上我有兩個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中;位置被繼承爲靜態）

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

來源

2013-07-10 Joshua Enfield

這實際上依賴於HTML/CSS標記，因爲位置屬性與此問題極其相關。雖然我認爲這種方法存在一些奇怪的方法，但是他們需要很多難看的DOM操作。 – Ennui

@Ennui編輯問題以包含我的標記結構/約束。 –

使用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-10 15:56:11

動畫元素從開始位置到另一個元素的位置

回答

相關問題