javascript - jQuery で要素を削除する際の問題

Question

jQuery を使用してページからオブジェクトを削除しようとしています。また、削除をアニメーション化したいと考えています。目標は、要素を fadeOut() にし、少し待ってから remove() することです。しかし、 setTimeout() 関数で使用しても、要素を削除するのを待つことを拒否しているようです。要素を fadeOut() にしてから remove() するにはどうすればよいですか?

$("button").click(function() {
    $(this).fadeOut();
    setTimeout(function() { $(this).remove();}, 1000);
});

Answer 1

マニュアルをよく読んでください: http://api.jquery.com/fadeOut/

fadeOut() メソッドには、fadeOut の完了後に呼び出されるコールバックがあります。使用するには:

$("button").click(function() {
    $(this).fadeOut(function() { $(this).remove();});
});

削除すると要素が見えなくなるため、要素を削除する前に、fadeOut が完了してから 1 秒待つ必要はありません。

Answer 2

あなたのタイムアウト関数でthisは、あなたが思っているものではありません - それは実際にはグローバルwindowオブジェクトです。

いずれにせよ（しゃれは意図していません）、「完了コールバック」を使用する必要があります。

$("button").click(function() {
    $(this).fadeOut('slow', function() {
        $(this).remove();
    });
});

決して、絶対に、混合setTimeoutしてアニメーション キューを使用しないでください。2 つをインターリーブすることは問題ありません。つまり、完了コールバックでタイマーを開始したり、タイマーでアニメーションを開始したりします。 .

修正コードの編集self-完了コールバックの必要はありません。私はまだそれについて考えてsetTimeoutいthisました。

Answer 3

$('button').click(function(){
    $(this).fadeOut(function(){$(this).remove()});
});​

デモ

Answer 4

これを試してみてください、多分それは役に立ちます：

$("button").click(function() {
    (function(that) {
        that.fadeOut();
        setTimeout(function() {
            that.remove();
        }, 1000);
    })($(this));
});

Answer 5

フェードアウトのコールバックを使用しないのはなぜですか?

$("button").click(function() {
    $(this).fadeOut(function(){$(this).remove();});
});