2011年10月10日月曜日

jQueryでconfirmした後のfadeOutが動かない時

例えば、ショップカート等で「削除」ボタンでカートから商品を消すような処理があります。
まず本当に削除していいか確認メッセージを出しますよね?

ということで、まずはjavascriptで

if (!confirm('削除OK?')) {
    return false;
}

みたいなのを書きました。

その後、ajaxで削除処理をして、画面上から選んだ商品をfadeOutするという処理をしたかったわけです。


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


これをやるとfadeOutのアニメーションをスキップして、パッと消えてしまうんです。
でも、fadeOutのコールバック関数内でfadeOutをやると、その部分はアニメーションしました。


$(this).fadeOut('slow', function() {
    $(this).remove();
    $('#something').fadeOut('slow');
});


何かfadeOutの前にワンクッション置けばいいのかと思って、fadeOutの前にdelay(0)を入れてみると正常に動作するようになりました。
大まかな流れは以下のような感じです。


if (!confirm('削除OK?')) {
    return false;
}
$.ajax({
    type:'get',
    url:'./del/',
    data:'item=xxx',
    success:function(data) {
        // delay(0)をfadeOutの間に入れる
        $('del_elm').delay(0).fadeOut('slow', function() {
            $(this).remove();
        });
    }
});


Chromeでしか確認してないけど、これで大丈夫なんじゃないかな?
もっとスマートな方法があれば教えて下さい。

0 件のコメント:

コメントを投稿