3

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

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

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

4 回答 4

2

您需要制作动画，然后运行该函数以追加 -

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

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

于 2012-12-11T23:23:41.913 回答
1

淡入淡出方法是非阻塞的，因此它们不会阻止后续方法的发生。如果您希望等到他们完成后再继续，请使用他们的回调：

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

于 2012-12-11T23:25:17.127 回答
0

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

这是一个工作演示：http: //jsbin.com/ipovic/1/edit

于 2012-12-11T23:11:12.430 回答
0

jsFiddle 演示

淡入淡出操作是异步的，所以调用方法只是触发动作——下一次调用不会等待它完成。要显示动画的两个部分，请使用 JavaScript 的原生setTimeout 方法将后续动作延迟一个时间常数。

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

$(document).on('click', '.item', function (){
    var $this = $(this);
    $this.fadeOut('slow');
    setTimeout(function() {
        $this.stop()
            .appendTo('#shoppingChart')
            .fadeIn('slow');
    }, 1000);
});​
于 2012-12-11T23:13:47.603 回答