在不同的位置使div“淡出”然后“淡入”

Question

所以这就是问题所在。我正在尝试构建交互式列表（就像ToDo列表一样）。我的任务是，在单击“div.item”后，它应该从“container”中消失（淡出），然后在“trash can”中淡入。 这是代码，但当我运行它时，所有动画都发生在“trash can”中。我尝试将一个变量设置为我的“.item”，并进行操纵，但仍然没有结果。

<script type="text/javascript" src="createList.js">

  $(document).on('click', '.item', function (){
        $(this).fadeOut('slow');
        $(this).appendTo('#shoppingChart').fadeIn('slow');
    });
</script>

- Maxim Ershov

Answer 1

您需要进行动画处理，然后运行该函数以添加 -

$(document).on('click', '.item', function (){
    $(this).fadeOut('slow',function () {
         $(this).appendTo('#shoppingChart').fadeIn('slow');
    });
});​

编辑 -- 工作示例 - http://jsfiddle.net/jmsessink/NHtv4/

- JSess

Answer 2

淡出方法是非阻塞的，因此它们不会阻止后续方法的执行。如果您希望在继续之前等待它们完成，请使用它们的回调函数：

// Listen for any click on an img within #desktop
$("#desktop").on("click", "img", function () {
    // Fade that image out over a second
    $(this).fadeOut(1000, function () {
        // When fade is complete, move item and fade-in
        $(this).appendTo("#trash").fadeIn();
    });
});​​​​​​​​​​​​​

演示：http://jsfiddle.net/9U2dP/ 您也可以使用延迟：

// Listen for any click on an img within #desktop
$("#desktop").on("click", "img", function () {
    // When our hide instruction is done
    $.when($(this).hide(1000)).done(function(item){
        // Append the item to #trash, and fade it into view
        $(item).appendTo("#trash").fadeIn(1000);
    });
});

演示：http://jsfiddle.net/9U2dP/3/

- Sampson

---

看起来@JSess比你更快，但你因为在示例中使用了placekitten而获得了所有的赞誉 :) - Jason

Answer 3

jsFiddle演示

淡入淡出操作是异步的，因此调用方法只是触发动作，下一次调用不会等待其完成。为了显示动画的两个部分，请使用JavaScript的本机setTimeout方法延迟后续操作。

此示例代码将为淡出操作分配1秒钟的时间，在该点之后停止动画，然后适当触发淡入操作。

$(document).on('click', '.item', function (){
    var $this = $(this);
    $this.fadeOut('slow');
    setTimeout(function() {
        $this.stop()
            .appendTo('#shoppingChart')
            .fadeIn('slow');
    }, 1000);
});​

- nbrooks

Answer 4

您需要等待动画完成，然后将项目添加到垃圾桶中，然后淡入。

这里有一个可工作的演示： http://jsbin.com/ipovic/1/edit

- Tamás Pap

---

这并不能说明该元素为什么没有被移动。 - Noctua

元素已经移动，也许我刚才解释得不太清楚。谢谢，它现在运行良好！ - Maxim Ershov

很高兴听到这个好消息 :) 如果您的问题已经解决，您可以接受一个解决方案。 - Tamás Pap