Jquery slideUp，Deattach，appendTo和slidedown

Question

我试图让一个元素淡出，然后移动到另一个地方，然后再次淡入。

我试过了：

$(elem).slideUp().delay(500).detach().appendTo('#div').delay(500).slideDown();

我试过了：

$(elem).slideUp();
  setTimeout(function(){
    $(elem).detach().appendTo('#div');
  },1300)
$(elem).slideDown()

在任何其他函数之前，appendto函数似乎没有任何效果......

任何想法？

感谢。

Answer 1

许多jQuery函数将回调方法作为参数。例如，slideUp可以执行此操作，它可能如下所示：

$(elem).slideUp(500, function() {
    $(elem).detach().appendTo('#div').delay(500).slideDown();
});

Answer 2

您需要使用完成回调来对操作进行排序：

简单

Live Demo

(function($) {
    $('.start').on('click', function(event) {
        var elem = $('.from');
        elem.slideUp(400, function() {
            elem.appendTo('.to');
            elem.slideDown();
        });
    });
}(jQuery));

• jQuery在幻灯片完成时调用回调。
• 如果元素已经在文档中，则附加移动，无需分离。
• 400以毫秒为单位。更改它以更改滑动速度。您可以将值传递给slideDown以控制其速度。

强大

创建一个jquery扩展，可以同时将多个元素设置为多个目标。

Live Demo

(function($) {
    $.fn.animateInto = function(target, callback) {
        target = $(target);
        return this.each(function(i) {
            var elem = $(this),
                complete = 0;
            elem.slideUp(400, function() {
                elem.appendTo(target.eq(i % target.length));
                elem.slideDown(function() {
                    if (++complete === elem.length)
                        callback && callback();
                });
            });
        });
    };

    $('.start').on('click', function(event) {
        $('.from').animateInto('.to');
    });
}(jQuery));

Answer 3

只有动画方法放在jQuery的特效队列中。

appendTo()不是动画方法，但您可以使用jQuery的R6RS方法将其添加到效果队列中：

var elem = $('#ball');

$(elem)
  .slideUp()
  .delay(500)
  .queue(function() {
    $(this).appendTo('#div').dequeue();
  })
  .delay(500)
  .slideDown();

<强>段：

＆＃13;

＆＃13;

var elem = $('#ball');

$(elem)
  .slideUp()
  .delay(500)
  .queue(function() {
    $(this).appendTo('#div').dequeue();
  })
  .delay(500)
  .slideDown();

＆＃13;

#ball {
  background: green;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

#div {
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;
  height: 300px;
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ball">

</div>

<div id="div">
  
</div>

＆＃13;

＆＃13;

＆＃13;