CODEWITHSUNDEEP
jquery
Steven Wyman
Steven Wyman

Reputation: 3

Delay in a jquery function using the .show() and .hide() functions

I'm trying to write a fairly simple gallery preview style program, shown below:

$(document).ready(function() {
 $('#moving_photos').mouseover(function() {
    $('#img4').delay(1000).hide(500);
    $('#img3').delay(2000).hide(500);
    $('#img2').delay(3000).hide(500);
    $('#img2').delay(5000).show(500);
    $('#img3').delay(6000).show(500);
    $('#img4').delay(7000).show(500);
});

});

My issue comes up after the first three images have been hidden. There is a roughly five second delay before the next image shows again, and it looks more like the function resetting than completion of the function. Any help you can offer would be appreciated.

Upvotes: 0

Views: 183

Answers (1)

CRABOLO
CRABOLO

Reputation: 8793

delay() does not work with hide() and show(). It does work with fadeOut() and fadeIn()

 $('#moving_photos').mouseover(function() {
    $('#img4').delay(1000).fadeOut(500);
    $('#img3').delay(2000).fadeOut(500);
    $('#img2').delay(3000).fadeOut(500);
    $('#img2').delay(5000).fadeIn(500);
    $('#img3').delay(6000).fadeIn(500);
    $('#img4').delay(7000).fadeIn(500);
});

Also, if you want the images to fadeIn quicker...

change the delay time. 1000 equals 1 second.

So there is a 7 second delay for your #img4 before it starts to fadeIn

Upvotes: 1

Related Questions