jquery - ドロップ可能なアニメーションが終了する前にトグルが発生しないようにする

Question

私が持っているもの：

jQuery UI を使用して、ある div から別の div に div をドラッグ/ドロップしています。

ドロップ イベントがトリガーされます。

1. ドロップされた div を所定の位置に緩和/スナップするアニメーション。
2. さらに別の div のトグル (表示/非表示)。

問題：

アニメーションが完了する前にトグルが発生します。アニメーションが完了した後にトグルを行う必要があります。

実際の例 + コード:

http://jsfiddle.net/dominornovus/3Hq3q/2/

私が試したこと：

アニメーション化されたセレクターの使用に失敗しました:

$(":animated").promise().done(function() {
//code here
}

私の質問：

ドロップ可能なアニメーションの前にトグルが発生しないようにするにはどうすればよいですか。

Answer 1

でコールバックを使用しますanimate()。

$('.drop').droppable({
    tolerance: 'intersect',
    drop: function(event, ui) {
        var drop_p = $(this).offset();
        var drag_p = ui.draggable.offset();
        var left_end = drop_p.left - drag_p.left + 1;
        var top_end = drop_p.top - drag_p.top + 1;
        ui.draggable.animate({
            top: '+=' + top_end,
            left: '+=' + left_end
        }, function() {  //callback
            $(".somediv").toggle();
        });
    }
});

フィドル