Changing positions of div panels

I have 3 panels: 1 - 2 - 3

The effect i want to have is that the three panels are moving forward.

• First i hide the panel number one (fadeOut)
• Second, I change the id of panel number 2 to 1 , panel number 3 to 2, then I change the panel number 1(hidde开发者_如何学Pythonn) to 3.
• Finally, i set fade in for panel number 3 (old id is number 1)

I dont know where i did wrong because when i tried running, the effect is that panel 1 fade out then it fade in again , at the same position.

P/S: is there any plug-in in jquery can do this?

Thank you

I'd try a method that doesn't involve changing the div IDs. It's good practice to keep the ID unique to that div. Instead of changing the IDs, you could use a class for all 3 of them, and get jQuery to fade out the first instance of that class, then use the insertAfter() function to insert this element after the last instance of that class.

var elements = $('.myclass');
elements.first().insertAfter(elements.last());