appendTo () анимация

Попытка добиться любого эффекта перемещения при добавлении элемента от одного к другому с помощью 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/

Ответы на вопрос(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'));​

Вотпример.

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

 The Alpha27 мар. 2012 г., 18:25
Если вы хотите использовать только эффект затухания, попробуйтеjsfiddle.net/q94VF/8
Решение Вопроса

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

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

$.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/

 Michael Zaporozhets30 окт. 2012 г., 06:12
не работает, если элемент шириной 100% наследуется от родительского контейнера. клонированный предмет выходит в полном размере
 عثمان غني10 июн. 2013 г., 15:09
офигенно .. следует добавить в официальный jquery.
 Rocket Hazmat27 мар. 2012 г., 18:38
Проблема в том, что нет встроенного метода, чтобы делать то, что вы хотите. Итак, я сделал один :-) Теперь вы можете просто использоватьanimateAppendTo :-П
 Alex G27 мар. 2012 г., 18:33
Выглядит чисто, но я подумал, что с jQuery я мог бы сделать это с меньшим количеством кода. знак равно
 Mike Turley11 янв. 2013 г., 01:22
@mikeymeows видит мой ответ для решения, которое действительно работает в этом случае.

что эта проблема давно решена, но я решил улучшить ответ Rocket. Мне нужно было анимировать поведение не только 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()Обратный звонок делает.

Ваш ответ на вопрос