Help tidying up some jquery

Ok so I have some javascript (jQuery) that i think is a little bloated and I was wondering whether or not there is a better way to code it, the code basically does the following the first class with the biography is shown, and the rest are hidden, a user then clicks and image, from that we get the index number and work out which .biography the image belongs to we then animate the old text out and the new in, below is what I believe to be quite messy code, and was wondering if there is a qiucker way to achieve what I am doing?

    $('.biography:first').show().addClass('visible');
            $('.biography:not(.visible)').css("top", "300px");
            $('.the-team img').click(function(){
                var clickedImage = $(this);
                $('.visible').animate({"top" : $('.the-team').height()+10 }, 1000).removeClass('visible').fadeOut(5);
                var indexToShow = clickedImage.index() + 1;
                if(indexToShow == 1) {
                    indexToShow = 2;
                } else if(indexToShow == 5) {
                    indexToShow = 4;
                } else if(indexToShow == 7) {
                    indexToShow = 5;
                }
                $('.biography:nth-child('+indexToShow+')').addClass('visible').show();
                $('.biography:nth-child('+indexToShow+')').animate({"top" : "123px"}, 1000);
            });

I have just been doing some x-browser testing, and apparently website broswers work out the indexes differently to moz based browsers, could anyone help on this?

Below is my HTML markup,

<article class="the-team">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php if($post->ID == 15) : ?>
                <h1>your team</h1>
            <?php else: ?>
                <h1><?php the_title(); ?></h1>
            <?php endif;?>
            <?php the_content(); ?>
        <?php endwhile; endif;?>
        <section>
        <?php query_posts('post_type=team&order=ASC'); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php the_post_thumbnail(); ?>
            <article class="biography">
                &l开发者_开发知识库t;h3><?php the_title(); ?></h3>
                <?php the_content(); ?>
            </article>
        <?php endwhile;  endif; ?>
        </section>
    </article>

IMO, the code seems fine. Only thing that I noticed:

$('.biography:nth-child('+indexToShow+')').addClass('visible').show();
$('.biography:nth-child('+indexToShow+')').animate({"top" : "123px"}, 1000);

could be changed to:

$('.biography:nth-child('+indexToShow+')').addClass('visible').show().animate({"top" : "123px"}, 1000);

This will save the time to find the nth child again.

I think this could be done more efficiently. I suspect jQuery lint (or FireQuery if you are using FireBug) would give you some warnings about using the same selectors more than once, and using class-only selectors. It would be much easier for us to "optimise" if you posted your actual rendered HTML, or even better created a jsFiddle that we could work with.