Question

What I have:

Using jQuery UI, I’m dragging/dropping a div from one div to another.

The dropping event triggers:

1. An animation that eases/snaps the dropped div into place.
2. The toggling (show/hide) of yet another div.

The problem:

The toggling occurs before the animation is complete. I need the toggling to occur AFTER the animation completes.

Live example + code:

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

What I’ve tried:

I’ve unsuccessfully attempted use of an animated selector:

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

My question:

How do I prevent the toggle occurring before the droppable animation.

Answer 1

Use the callback in 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();
        });
    }
});

FIDDLE