I am using following code for animation using jquery. When I click on a list element, the corresponding div slides down and opacity goes to '1'. When I click other list element, the previous one goes up and fades, and the next one come down.
var id_prev;
var id_new;
$("#tag ul li ").click(function(event){
var i = $(this).index()+1;
var id_new="#person"+i;
if(id_new != id_prev){
$(id_prev).animate({top:'300px',opacity:'0'},500);
$(id_prev).delay(200).css({'z-index':'0'});
$(id_new).delay(200).css({'z-index':'300'});
$(id_new).delay(200).animate({top:'300px',opacity:'0'},500);
$(id_new).delay(200).animate({top:'330px',opacity:'1'},500);
id_prev = id_new;
}
});
