Question

http://jsfiddle.net/jmPCt/18/

I’m quite new to JS and jQuery. I’ve written all the code by hand in the link above. It works and does what I want it to save for but one thing. If you click rapidly on the ‘next’ link, you’ll see either a flash of the next container to display or, if you click rapidly enough, the code will display two containers but I only want one to show only at a time. Is there some way of handling this in jQuery? I’ve tried using stops as discussed here: How to prevent jquery hover event from firing when not complete? but this does not solve the issue.

Answer 1

You are looking for .stop(). It’s implementation changes with the desired behavior but the documentation should clear that up for you: http://api.jquery.com/stop

Here is a demo: http://jsfiddle.net/jmPCt/19/

Because of how .stop() works, when you use it with .fadeIn() or .fadeOut() you can chop-up your animations to the point where they no longer work. The best fix I’ve found is to always animate to absolute values with .fadeTo(): http://api.jquery.com/fadeTo

Here is the code I added to your JSFiddle, this overwrites the default .fadeIn() and .fadeOut() jQuery functions with ones that use .fadeTo() and .stop():

$.fn.fadeOut = function (duration, callback) {
    $(this).stop().fadeTo(duration, 0, function () {
        $(this).css('display', 'none');
        if (typeof callback == 'function') {
            callback();
        }
    });
};
$.fn.fadeIn = function (duration, callback) {
    $(this).css('display', 'block').stop().fadeTo(duration, 1, function () {
        if (typeof callback == 'function') {
            callback();
        }
    });
};

Update

If you set the position property for the “slide” elements then they can animate on top of each other which will remove the jumpiness that your code exhibits:

HTML —

<div id="controls">
    <div id="countah"></div>
    <a href="#" id=prev>prev</a> | 
    <a href="#" id=next>next</a>
</div>

CSS —

.js .staceyPort {
    display: none;
    position : absolute;
    top      : 0;
    left     : 0;
}

#controls{ 
    position   : fixed;
    bottom     : 0;
    left       : 0;
    z-index    : 1000;
    background : gold;
}​

Here is a demo: http://jsfiddle.net/jmPCt/21/