Using Droppable, Animate and Effects Together.

Using Droppable, Animate and Effects Together.

I am using the droppable function combined with some jQueryUI effects.  When an element hovers over the droppable area, you can define a hoverClass.  I use it to change the background color of the droppable box.  I've also added the animate function to animate the background color from grey to red, the transfer effect to show the element dropping to the droppable box, then the animate function again to change the red slowly back to grey.

This all works great.  However, if I try to drop another element after that, the hoverClass no longer triggers.  How can I get it to do so again?  Here is some sample code:

  1.                               $("#dropArea").droppable({
                                    accept: '#imagesList > li',
                                    hoverClass: 'dropAreaHover',
                                    drop: function(event, ui) {
                                        deleteImage(ui.draggable,ui.helper);
                                    },
                                    activeClass: 'dropAreaHover'
                                });
                                function deleteImage($draggable,$helper){
                                    params = 'PID=' + $draggable.attr('id');
                                    $.ajax({
                                        url: 'fns/image_delete.php',
                                        type: 'POST',
                                        data: params
                                    });
                                    $('#dropArea').animate({ backgroundColor: "#F00" }, 200);
                                    $helper.effect('transfer', { to: '#dropArea', className: 'ui-effects-transfer' },500);
                                    $('#dropArea').animate({ backgroundColor: "#333" }, 600);
                                    $draggable.remove();
                                }