Hover img fadeIn next or fadeIn first img
<p>I have simplified what I am trying to achieve from my previous question. </p>

<p>This is a example of the script I am trying to write: <a href="http://dev.web2works.co.uk/img-hover/" rel="nofollow">example</a> when you hover over the image you can see the problem. Possible fix with a delay?</p>

<p>I have a list of product each with 2-5 thumbnail images. I want to create a hover function that cycles through the images hiding/showing the next image.</p>

<p>I did try to stack the images using z-index although this was causing too much of a problem. </p>

<p>This is the hover function that I have put together so far:</p>

<pre><code>$(".image_cycle img").live("hover", function(){

    if ($(this).next("img").is(":hidden")) {
        $(this).next("img").fadeIn("slow",function(){
            $(this).siblings("img").hide();
        });
    } else {
        $(this).parent().find("img:first").fadeIn("slow",function(){
            $(this).siblings().hide();
        });
    }
});
</code></pre>
