Question

What would be the best way to have a single image which when you hovered your mouse over it, it would cycle fade in/out into a series of other images (like 3 or 4) before returning back to the original? Also, it would stop fading/changing images and go back to the original image if you moved your mouse off of the image.

Any help is appreciated.

Thanks!

Answer 1

I would see about having the mouseover event (or hover if you are using an external library) of the object that you are wishing to switch tied to a window.setTimeout function. Make sure to store the timeout id so that you can cancel it if the user’s mouse exits the window. The window.setTimeout would then scroll through the pictures.

Maybe something like this:

$(function(){

    $("#test").hover(function(e) {
        $.data("timeout", window.setTimeout(function() {
            //Transition here
        }));
    }), function(e) {
        window.clearTimeout($.data("timeout"));
        //Put image back to normal
    });

});

Hope this helps,

JMax