DOM要素の削除と貼り付けをアニメ化する

Question

私はユーザーのためにインタラクティブな体験をしたいと思います。私はカードゲームを作ってウェブを学ぼうとします。

私が持っているものは、ページ上の他の場所に表示されるはずのものです。

を（イムこれまでのjQueryを使用して）（簡体字）・ケースを使用している：今、私はそれにいくつかのアニメーションを追加したい

var card = $('[card=X]').remove(); 
$('.board').append(card); 

。

私は適切なフレームワークの選択に失敗しています。 私が試したものでは、コールバックで削除を呼び出そうとしたときに、削除をタイムアウトできなかったか、アニメーションが消えてしまった。恐ろしいことに、コールバックの前に解雇されたか、まったく解雇されなかったからです。それとも、再付着するものが残っていませんでした。 それでは、単に「ぼかし」または「フェード」する必要があります。

アニメーションのあるものを切り離し、別の場所に配置してアニメーションとともに表示させたいと思います。 優れたボーナスとして、それらのアニメーションはオリエンテーションを持つため、エンドユーザーには「from」と「where to」が表示されます。 （矢印またはそれらの2箇所の間に引いた線のように。）

（SRYより特異的であるが、それに魅力がない表示されますから、すべてのフレームワーク/ libsのためにその質問を求めていないため。）

---

編集： ニックは正しい方向に私を指摘しました。私の問題は、定型コードでした。彼が提供したコードを調整しました。 （アニメーションをフェードインして+イベントハンドラで復活させてください） ..私は彼の答えを正しいものとしてマークしました。 （それがなかったとしてもことを、彼はオリジナルのものを追加していなかった、代わりに彼は新しいものを作成した。）

$('.cards ').on('click', '[card-id]', function() { 
    $(this).fadeOut(1000, function() { 
    var old = $(this).remove(); 

    $('.cards').append(old); 
    old.fadeIn(); 
}); 

Answer 1

for(var i = 0; i < 6; i++) { 
 
    $('.cards').append('<div class="card" card-id="'+i+'"></div>'); 
 
} 
 

 

 
    $('[card-id]').click(function() { 
 
    $(this).fadeOut(2000, function() { 
 
     $(this).remove(); 
 
     
 
     $('.cards').append('<div class="card" card-id="'+$(this).attr('card-id')+'"></div>'); 
 
    }); 
 
    });

.card { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 120px; 
 
    height: 180px; 
 
    background-color: #F4F4F4; 
 
    border: 1px solid #E8E8E8; 
 
    border-radius:5px; 
 
    margin: 15px; 
 
    cursor: pointer; 
 
} 
 
.card:after { 
 
    content: attr(card-id); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 24px; 
 
    font-weight: 700; 
 
    font-family: courier, serif; 
 
}

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

 

 
<div class="cards"></div>

Answer 2

jQueryのから.animate（）を使用することを検討してください。あなたはそれでできることがたくさんあります。

APIを見てみましょう：http://api.jquery.com/animate/