Question

I am designing a potal framework and I have multiple portlets(divs) within the main div.
When I move a div, I want it to move to the top of the page and expand vertically. All of this works, however, I would like to animate the moving part.

this is what my code looks like

$('#smallpotletdiv').prependTo($('#maindiv'));

what would someone that knows more about animation suggest? How would I show the div moving from its current location and attach itself to the new location?

Answer 1

Play with the positions using animate and prepend at last. After the prepend is complete, change the values to default

$("#smallpotletdiv").animate({
      top: 300,
      left: 500     
}).prependTo($("#maindiv")).css({
      top: 'auto',
      left: 'auto'
});

Update:

You working codes will look something like this

current.animate({
  top: -30,
  left: -20     
}, 2000, function() {
    current.prependTo(prependToDiv).css({
       top: 'auto',
       left: 'auto'
    });        
});

Check Here

The problem with their execution were that, you didn’t position the element to be movable through left and top. For that an element has to be positioned absolutely i.e. position: absolute.