Scale/Animate jQuery Draggable when dropped into droppable

Question

I have a series of draggable images and some droppable folders. I'm looked around the web and can't find any plugins/code on a way to create a effect inwhich when a draggable is dropped onto a droppable, it scales downwards into the droppable area and fades out.

Basically, something similar to when you drag an icon into a folder in OSX. I'm trying to give the user the visual feedback that the image has been added to a folder.

I should add that I do not want to remove/move the draggable from the screen. I am using 'clone' to provide the visual feedback that the dragging is taking place.

Any suggestions/code/ideas?

UPDATE

Worked a little bit more while looking at clone() in jquery. I have come up with the following, however the position of the clone seems to be quite random. Ideally, I would like the clone to be positioned over the droppable when performing the animation.

$('#photoscontainer').append($(r.photos[i].thumbnailhtml).draggable({
                                helper:"clone",
                                stop: function(event,ui){

                                    clone = ui.helper.clone();
                                    $(this).append(clone.addClass('inside-drop-zone').draggable({
                                            containment: '.drop-zone'
                                    }));
                                    clone.animate({
                                        opacity: 0,
                                        width: "0",
                                        height: "0"
                                    });
                                }


                            })
                        );

Answer 1

You can write the animation with jQuery:

function dropped(elementId) {
    var jId = "#" + elementId;
    $(jId).animate({
        width:'-=50',
        height:'-=50'
    },5000);
    $(jId).fadeOut();
}

I hope something like this is what you were looking for.