Question

First of all, my jQuery (or Javascript period) isn’t good.

I am trying to make an image roll-over to a new image when I hover over it using the jQuery animate function.

Here is what I have working (image rolls over to text): http://jsfiddle.net/Draven/NJCUn/5/

Here’s what I was hoping would work (replaced text with an image): http://jsfiddle.net/Draven/U7m25/4/

I believe the problem is because the script is looking for all the img tags in the <li>. Is there a way I can make it pick the first img tag?

Answer 1

working example:

$('ul.hover_block li').hover(function() {
    $(this).find('img').eq(1).animate({
        top: '425px'
    }, {
        queue: false,
        duration: 500
    });
}, function() {
    $(this).find('img').eq(1).animate({
        top: '0px'
    }, {
        queue: false,
        duration: 500
    });
});​

http://jsfiddle.net/yDtkZ/20/