jqueryhoveranimated

hover and click interaction with animated gif

I have a logo showing by default. When hovering, I want to show another image. When clicking I want to show a third image, which is an animated gif.

I have this all working but I need a delay in place so that the animated gif can run completely, even if the hover is lost. I've tried a bunch of things and no joy. Here's the code:

    $(function() {
        $(".logo img").hover(
            function() {
                $(this).attr("src", "http://[URL]/images/logo-hover.png");
            },
            function() {
                $(this).attr("src", "http://[URL]/images/logo.png");
            }                         
        ); 
    });        

    $(function() {
        $(".logo img").click(
            function() {
                $(this).attr("src", "http://[URL]/images/logo-animate.gif");
            }                         
        ); 
    });
Solution

  • Make a div or and iframe, put the images over each other and control their zIndex and opacity via jQuery animate