Jquery hover to only have effect for certain amount of time

Question

Hi,

I'm using a jquery hover effect but would only like the effect to last for around a second when rolled over....ie user rolls over image, it changes for a second, then reverts back to the original image.

$(document).ready(function(){   
$(function() {
    $('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });
});

});

This is the code I'm using for the standard hover. Any help would be great, thanks.

Answer 1

You can do a setTimeout method in hover callback method to restore back to original image after a second.

Answer 2

I'm still having trouble implementing this code...I imagine the setTimeout function should be added somewhere here

 }, function() {
    var currentImg = $(this).attr('src');
    $(this).attr('src', $(this).attr('hover'));
    $(this).attr('hover', currentImg);
});

but I'm just not sure how to implement it properly.

Some help would be really appreciated, thanks.