Help with animating an element in jQuery

Question

I have an unordered list with a few list elements.

#tags {
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid red;
    list-style: none none;
}

#tags li {
    position: absolute;
    background: gray;
    }

I have also started writing a jQuery plugin to animate the list elements. So far, I place the list elements randomly in the parent container, and choose a random font size for the text.

My next step (which I am a bit stuck on) is to animate the list elements... essentially, I want the list elements to do something like this

• Slide from left to right whilst getting slightly larger up to the middle and then dropping in size back to normal when it hits the right border.
• Then, it should do the same in reverse, however it should also set a negative 'z-index' and maybe fade in opacity a bit.

The first bit I'm really stuck on, is how to determine if the element is near the middle, in a way that I can have a value that starts at 0.1 on the far left hand size and is 1 in the middle and then back to 0.1 on the far right hand size.

Basically, I want them to appear as if they are going around in a faux 3D circle into the page.

Then I could do something like this

$(this).css({
   fontSize: percentageTowardsMiddle * 14,

});

Do you know how I could do this?

Thanks

Answer 1

Well, if you're using the left property to move the items from left to right... and you use percentages for the left property... then they'd be around halfway when the left property is around 50%? (or, I guess, 50% minus half of the item width...) - HTH