jQuery animate current list items

Question

here is the code: http://jsfiddle.net/hQnXm/7/

So basically i need when hover, it should animate only that li item images. Currently it animates all li images globally.

Answer 1

How about selecting:

var top = self.closest(".item");

Instead of .box.

By selecting the li.item you can also replace your calls to find with children.

Answer 2

The way the code currently works, each set of <li> tags needs to be in it's own <ul class="box"> for the code to work like this: http://jsfiddle.net/YT2LG/

Or, you can change this line of code:

var top = self.closest(".box");

to this:

var top = self.closest(".item");

to get the code to work with the HTML you have as shown here: http://jsfiddle.net/jfriend00/DjtKS/