動畫將最後一個孩子添加到第一個

-1

有沒有一種方法可以通過追加（.append（））它或任何其他方法來動畫從最後一個元素到第一個元素的網格中佈置父項子元素的移動？動畫將最後一個孩子添加到第一個

2014-02-17 Kendall

你可以看看以前的這篇文章：http://stackoverflow.com/questions/1520178/jquery-using-append-with-effects – Littm

只是爲了好玩，爲了紀念Start Trek - http：// jsfiddle.net/timspqr/49gGx/ – TimSPQR

謝謝...我正在尋找一些東西，我可以將「移位」和「移位」到網格，因爲我添加和移除了瓷磚......一種地鐵效應，但它會「轉移」每個瓦片 – Kendall

您可以淡出的元素，將其刪除，將其追加並隱藏，然後消失在這裏的例子，jsfiddle：

$(document).ready(function(){ 
    $(".do").click(function() { 
     $(".last").fadeOut(1000, function() { 
      var $last = $(this).remove(); 
      $last.hide(); 
      $("ul").prepend($last); 
      $last.fadeIn(1000); 
     }); 
    }); 
});

來源

2014-02-17 01:49:33 wander

好了，現在我們有更多的信息，或許我們可以拿出以部分解決方案。

在此FIDDLE .holder div設置爲固定大小，只允許兩行迷你div。

您刪除最後一個，好的，但是如果您在前面放置一個（prepend（）），則所有內容都會右移。

Mickey是第一個，Chip和Dale是最後一個 - 當它們移動到前面時，Mickey向右移動，其餘的移動得當。

我確定有更優雅的方式來做到這一點，但至少這是一個開始。

我用動畫只是爲了減緩過程 - 我相信你不會需要這個。

$('.holder').animate(
    { 
     width: 401 
    }, 
    1000, 
    function(){ 
     var copypic = $('.holder div:last-child').clone(); 
     $('.holder div:last-child').remove(); 
     $('.holder').prepend(copypic); 
    });

這裏是它寫成一個函數FIDDLE，不斷四處移動圖像。

來源

2014-02-17 05:50:38 TimSPQR

動畫將最後一個孩子添加到第一個

回答

相關問題