Question

所以这是交易。我正在尝试构建交互式列表（就像ToDo列表一样）。我的任务是点击'div.item'从“容器”中消失（fadeOut），然后在“垃圾桶”中淡入。这是代码，但是当我运行它时，所有动画都发生在“垃圾桶”中。我试图设置一个变量等于我的“.item”并用它进行操作，仍然没有结果。

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

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

Answer 1

您需要设置动画，然后运行要附加的功能 -

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

修改 - 工作示例 - http://jsfiddle.net/jmsessink/NHtv4/

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/

Answer 3

您必须等待动画完成，然后将项目附加到垃圾桶，然后淡入。

这是一个有效的演示： http://jsbin.com/ipovic/1/edit

Answer 4

jsFiddle Demo

淡入淡出操作是异步的，因此调用方法只会触发操作 - 下一次调用不会等待它完成。要显示动画的两个部分，请使用JavaScript的本机setTimeout method按时间常数延迟后续操作。

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

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

使div'fadeOut'然后'fadeIn'在不同的地方

4 个答案: