3

だからここに取引があります。インタラクティブリストを作成しようとしています（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>
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 に答える