jQuery animate() "flashing" when triggered again before it completes

Question

Here is a JSFiddle that demonstrates the problem... http://jsfiddle.net/L2NBP/5/ For obvious reasons this code is a simplified version of my actual code, also shown below.

CSS

#frame { left:0; position:absolute; width:190px; }
.layer { background:#FFF; position:absolute; right:0; top:0; width:190px; }
#process { z-index:1; }
#contact { z-index:2; }
#message { z-index:3; }

HTML

<div id="frame ">
    <div id="process" class="layer">Processing...</div>
    <div id="contact" class="layer"># Results Found</div>
    <div id="message" class="layer">Results Updated</div>
</div>
<button onclick="javascript:ajaxMessage();">Click Here</button>

​ JS

function ajaxMessage(){
    // if( $('#message').is(":animated") ) return;
    $('#contact').fadeOut('slow',function(){
         $('#message').fadeIn('slow')
                      .animate({opacity:1.0},1000)
                      .fadeOut('slow',function(){
                          $('#contact').fadeIn('slow');
                      });
    });
}​

DETAILS

I have a form that submits to AJAX .load(). I am using the UI Slider http://jqueryui.com/demos/slider/ for the inputs. I'm using the range option and have several inputs "sliders" in the form, so the AJAX can potentially be called multiple times a second. I am showing a success message when .load() completes. The message is animated using .animate() http://api.jquery.com/animate/ as you can see in the JS Fiddle link above.

The problem is that the function to display the message will be called multiple times before it completes the first animation. When that happens the animations stack up and "flash" long after the user stopped modifying the form values. I tried this... if( $('#message').is(":animated") ) return; ...but it still doesn't work very smoothly. Basically I need to figure out how to prolong the duration of the animation dynamically, or at least make it appear to work that way. Or delay the success message until after the user has made their last modification to the form... ex: the message doesn't show utill 2 seconds have passed since the user made a change.

Any ideas?

---

ACCEPTED ANSWER

Accepted Answer in action... http://jsfiddle.net/L2NBP/7/

Compare this to the original at http://jsfiddle.net/L2NBP/5/ To see the difference click the button multiple times in 1-2 seconds and watch the response text to the right of the button.

Answer 1

If I've got your question right,

You should use stop()

like this,

$('#message').stop().fadeIn('slow').animate({opacity:1.0},1000).fadeOut('slow',function(){
        $('#contact').fadeIn('slow');
});

Also, do a second animation , when one completes,

var msg = $('#message');
msg.stop().fadeIn('slow',function(){
    msg.animate({opacity:1},1000,function(){
        msg.fadeOut('slow',function(){
            $('#contact').fadeIn('slow');
        })
    })
});