appendTo () анимация

Question

Попытка добиться любого эффекта перемещения при добавлении элемента от одного к другому с помощью jQuery или jQuery-UI.

<div id='div1'><div id='i-am-moving-slow'></div></div>
<div id='div2'></div>

$('#i-am-moving-slow').appendTo('#div2');

Пожалуйста, помогите. Спасибо.

РЕДАКТИРОВАТЬ: http://jsfiddle.net/5936t/

Answer 1

Вы можете добавить клон элемента в новое место, но оставить его скрытым.Анимируйте исходный элемент в новом месте, затем удалите старый элемент и покажите новый.

Я сделал плагин для этого.Попробуйте это:

$.fn.animateAppendTo = function(sel, speed) {
    var $this = this,
        newEle = $this.clone(true).appendTo(sel),
        newPos = newEle.position();
    newEle.hide();
    $this.css('position', 'absolute').animate(newPos, speed, function() {
        newEle.show();
        $this.remove();
    });
    return newEle;
};


$('#i-am-moving-slow').click(function() {
    $(this).animateAppendTo('#div2', 1000);
});​

DEMO: http://jsfiddle.net/5936t/36/

Answer 2

Я знаю, что эта проблема давно решена, но я решил улучшить ответ Ракеты.Мне нужно было анимировать поведение не только appendTo, но и prependTo, insertBefore и insertAfter, и я также хотел иметь возможность настраивать замедление и обеспечивать обратный вызов, так же, как вы можете с помощью $.fn.animate().

Кроме того, мойФункция оставляет позади оригинальный элемент, а не его клон, ведя себя точно так же, как appendTo.Поэтому, если у вас есть какие-либо существующие ссылки на элемент, лежащий в переменных вашего скрипта, они не сломаются.

Я также использую position: относительный, а не position: absolute для анимации, поэтому, если ширина элемента была100% своего контейнера он не выскочит и не займет 100% окна во время анимации.Однако в конце анимации он переместится на 100% от любой ширины его нового контейнера.

Вот мое решение:

$.fn.animateTo = function(appendTo, destination, duration, easing, complete) {
  if(appendTo !== 'appendTo'     &&
     appendTo !== 'prependTo'    &&
     appendTo !== 'insertBefore' &&
     appendTo !== 'insertAfter') return this;
  var target = this.clone(true).css('visibility','hidden')[appendTo](destination);
  this.css({
    'position' : 'relative',
    'top'      : '0px',
    'left'     : '0px'
  }).animate({
    'top'  : (target.offset().top - this.offset().top)+'px',
    'left' : (target.offset().left - this.offset().left)+'px'
  }, duration, easing, function() {
    target.replaceWith($(this));
    $(this).css({
      'position' : 'static',
      'top'      : '',
      'left'     : ''
    });
    if($.isFunction(complete)) complete.call(this);
  });
}

Использование:

// basic usage
$("#i-am-moving-slow").animateTo('appendTo', '#div2');

// advanced usage
$("#i-am-moving-slow").animateTo('insertAfter', '#some-other-div', 'linear', function() {
  console.log("animation completed on ", this);
});

duration и easing будут делегированы на вызов animate, поэтому, если вы их опустите, они будут переданы как undefined, и jQuery будет использовать значения по умолчанию.complete вызывается после замены элемента в конце анимации и устанавливает this равным анимируемому элементу, как это делает обратный вызов $.fn.animate().

Answer 3

Может быть, это то, что вы хотите

HTML

<div id='div1'><div id='i-am-moving-slow'>i-am-moving-slow</div></div>
<div id='div2'>div2</div>

JS

$('#div2')
.append($('#i-am-moving-slow')
.css({'margin-left':-$(this).width()+'px'})
.delay(500)
.animate({'margin-left':'0px'}, 'slow'));​

Вот пример .

Если вы хотите добавить копию, вам следует клонировать ее, а - это еще один пример с использованием клона.