2014-02-17 7 views
-1

Есть ли способ, которым я могу анимировать перемещение родительских детей, выложенных в сетке от последнего элемента до первого элемента, путем добавления (.append()) его или любого другого метода?Анимация добавления последнего дочернего элемента к первому

+1

Возможно, вы посмотрите на это предыдущее сообщение: http://stackoverflow.com/questions/1520178/jquery-using-append-with-effects – Littm

+0

Просто для удовольствия и в честь Start Trek - http: // jsfiddle.net/timspqr/49gGx/ – TimSPQR

+0

Спасибо ... Я ищу что-то, где я могу сортировать «сдвиг» и «переходить» на сетку, когда добавляю и удаляю плитки ... своего рода эффект метро, ​​но он «сдвигает» каждую плиту поперек и вниз. – Kendall

ответ

2

Вы можете приглушить элемент, удалить его, добавьте его и скрыть, а затем исчезают в Вот пример, jsfiddle:.

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

Хорошо, теперь у нас есть больше информации, возможно, мы можем придумать с частичным решением.

В этом FIDDLE. Owner div установлен фиксированным размером, который допускает только два ряда мини-div.

Вы удаляете конец один, хорошо, но если вы положите его спереди (preend()), все сдвинется вправо.

Микки является первым, Чип и Дейл последним - Когда они перемещаются на фронт, Микки движется вправо, а остальные сдвигаются соответственно.

Я уверен, что есть более элегантные способы сделать это, но, по крайней мере, это начало.

Я использовал анимацию только для замедления процесса - я уверен, что вам это не понадобится.

JS

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

Вот FIDDLE, где написано как функция, и постоянно перемещает изображения вокруг.

Смежные вопросы