Animated Menu using JQuery

I am trying to create a menu that animates using jQuery. I have an example here http://www.freebiejeebiesworld.com/category/category.html

However I want each section to animate individually on hover. Each will begin with the same static image but with animate to a different image when hovered.

I was thinking something like

<ul id="menu" class="category"><li><img src="image1.开发者_如何学运维jpg" hover="image2.jpg"></li></ul>

However I don't know how to write the jQuery function to complete the work.

ANy help would be appreciated

jQuery code:

$(function() { 
    $("#menu img").hover(function() { 
        var hover = $(this).data("hover"); 
        $(this).data("hover", $(this).attr("src")); 
        $(this).attr("src", hover); 
    }, function() { 
        var hover = $(this).data("hover"); 
        $(this).data("hover", $(this).attr("src")); 
        $(this).attr("src", hover); 
    }); 
});

Try studying jquery hover documentation.