Jquery FadeIn FadeOut keeps repeating

Here's my code:

$('.class').fadeOut(function(){
    $('#image').fadeIn().delay(1000).fadeOut(); 
});

It fades in, waits one second and then fades out. But then it repeats.

EDIT 1: It also does it four times o开发者_如何学Cnly.

EDIT 2: .class applies to four elements.

SOLUTION:

$('option').fadeOut().last().queue(function(){
   //here fade in and out the image
}

If the "#image" id is on a div element, you are firing the parent event from the child event causing recursion(loop). Give the div(s) their own id or class.

If there are four class element, your $('.class').fadeOut() function will fire four times (see http://jsfiddle.net/DrZcj/2/). You can separate the two functions to make sure your #image function is only called once.

Maybe something like: http://jsfiddle.net/DrZcj/3/

EDIT:

Is this what you're looking for: http://jsfiddle.net/DrZcj/4/

If all other answers didn't solve your issue, you need to make sure your js file is not referenced twice or you the event attached twice.
Had the same issue before and found that I had the file referenced twice in my page.

This is because you have 4 div elements in your page, for each div element you tell to jquery to "fadeIn,wait 1s and fadeout" this element:"$('#image')", so jquery do it as you request it.

"But I want the #image to appear only after the four class elements have faded out."

var counter=0;
$('.class').fadeOut(function(){
    ++counter;
    if(counter==4) $('#image').fadeIn().delay(1000).fadeOut();
});