.bind() and .unbind() doesn't work properly

Question

I have two links that if a user click one,the article related to the link will be shown in an animation.if a user clicks another link after he/she clicked the first and before the previous animation is done,their animations will be conflicted.I want to use .bind() and .unbind() functions to prevent user from clicking a link while other link's event is working.but when I unbind an event,it won't bind to the element after animation.

JS Code:

$("a[href='#about-enamel']").click(function () {
        $("a[href!='#about-enamel']").unbind("click");
        if ($("article[id='about-enamel']").attr('class') === 'visible') {
            $("a[href!='#about-enamel']").bind("click");
            return 0;
        }
        else if ($("article[class='visible']").length) {
            $("article[class='visible']").hide('drop', { easing: 'easeOutBack', direction: 'down' }, 500, function () {
                $(this).attr('class', 'hidden');
                $("article[id='about-enamel']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
                    $(this).attr('class', 'visible');
                    $("a[href!='#about-enamel']").bind("click");
                });
            });
        }
        else {
            $("article[id='about-enamel']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
                $(this).attr('class', 'visible');
                $("a[href!='#about-enamel']").bind("click");
            });
        }
    });
    $("a[href='#order']").click(function () {
        $("a[href!='#order']").unbind("click");
        if ($("article[id='order']").attr('class') === 'visible') {
            $("a[href!='#order']").bind("click");
            return 0;
        }
        else if ($("article[class='visible']").length) {
            $("article[class='visible']").hide('drop', { easing: 'easeOutBack', direction: 'down' }, 500, function () {
                $(this).attr('class', 'hidden');
                $("article[id='order']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
                    $(this).attr('class', 'visible');
                    $("a[href!='#order']").bind("click");
                });
            });
        }
        else {

            $("article[id='order']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
                $(this).attr('class', 'visible');
                $("a[href!='#order']").bind("click");
            });
        }
    });

If this problem has other solutions,please inform me.

Answer 1

Here's a basic example I've put together illustrating how to use stop() to kill any in-progress animations, so you can start another without them conflicting.

http://jsfiddle.net/zFAY9/3/