Jquery animation in firefox

Question

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 previos 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;
    }

});

Answer 1

That's probably not going to work quite how you want it, because what about if they click on the last one?

But first of all, you're not telling these to be anything:

var id_prev;
 var id_new;

You've told them to be variables, but not what they contain. You need something like this at the top:

if ($(this).index() > 0) {    
   var id_prev = $(this).index()-1;
}

So if the div isn't the first one, set the previous ID to the one selected, minus 1...

But I would really suggest that you start from just having two, and coding them fully - rather than using incrementing values and variables - then take that code and condense it down where possible.