jquery toggle, prevent clicking during toggle

Given the following jquery code..

jQuery.fn.sliding = function () {

    return this.each(function () {

        $(this).bind('ON_CONTENT_CHANGING', function (e) {
            $(this).block({
                overlayCSS: { opacity: 1, color: '#000' },
                timeout: 800
            });
        });

        $(this).bind('ON_CONTENT_CHANGED', function (e) {
            $(this).sliding();
            $(this).unblock();
        });

        var $panels = $(this).find('.scrollContainer > div');
        var $container = $(this).find('.scrollContainer');
        var $resized = $panels.css({ 'width': $(this).width() - 44 });

开发者_运维知识库

        // if false, we'll float all the panels left and fix the width 
        // of the container
        var horizontal = true;

        // float the panels left if we're going horizontal
        if (horizontal) {
            $panels.css({
                'float': 'left',
                'position': 'relative' // IE fix to ensure overflow is hidden
            });

            // calculate a new width for the container (so it holds all panels)
            $container.css('width', $panels[0].offsetWidth * $panels.length);
        }

        // collect the scroll object, at the same time apply the hidden overflow
        // to remove the default scrollbars that will appear
        var $scroll = $(this).find('.scroll').css('overflow', 'hidden');

        // handle nav selection
        function selectNav() {
            $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
        }

        $(this).find('.navigation').find('a').click(selectNav);


        // go find the navigation link that has this target and select the nav
        function trigger(data) {
            var el = $(this).find('.navigation').find('a[href$="' + data.id + '"]').get(0);
            selectNav.call(el);
        }

        if (window.location.hash) {
            trigger({ id: window.location.hash.substr(1) });
        } else {
            $('ul.navigation a:first').click();
        }

        // offset is used to move to *exactly* the right place, since I'm using
        // padding on my example, I need to subtract the amount of padding to
        // the offset.  Try removing this to get a good idea of the effect
        var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1;


        var scrollOptions = {
            target: $scroll, // the element that has the overflow

            // can be a selector which will be relative to the target
            items: $panels,

            navigation: '.navigation a',

            // allow the scroll effect to run both directions
            axis: 'xy',

            onAfter: trigger, // our final callback

            offset: offset,

            // duration of the sliding effect
            duration: 500,

            // easing - can be used with the easing plugin: 
            // http://gsgd.co.uk/sandbox/jquery/easing/ 
            easing: 'swing'
        };

        $(this).serialScroll(scrollOptions);
        $.localScroll(scrollOptions);

        scrollOptions.duration = 1;
        $.localScroll.hash(scrollOptions);

    });
};

Then this is the actual html file...

    $('#toggle').toggle(function (e) {
        if ($("#sidebar:animated, #canvas:animated").length) {
            e.preventDefault();
            return;
        }

        $(".ui-sliding").trigger('ON_CONTENT_CHANGING');


        $('#sidebar').hide('slide', { direction: 'right' }, 100, function () {

            $('#canvas').switchClass('span-17', 'span-24', 100, function () {
                $(".ui-sliding").trigger('ON_CONTENT_CHANGED');
                $('#toggle').switchClass('close', 'open');
            });
        })
    },
            function (e) {
                if ($("#sidebar:animated, #canvas:animated").length) {
                    e.preventDefault();
                    return;
                }


                $(".ui-sliding").trigger('ON_CONTENT_CHANGING');

                $('#canvas').switchClass('span-24', 'span-17', 100, function () {
                    $('#sidebar').show('slide', { direction: 'right' }, 100, function () {
                        $(".ui-sliding").trigger('ON_CONTENT_CHANGED');
                        $('#toggle').switchClass('open', 'close');
                    });
                });
            });

Is there any way to prevent the toggle from being fired again if someone clicks while it is performing the function?

I referenced Tell jQuery to ignore clicks during an animation sequence and the technique did not work.

You can do something like this, check if anything you animate is animating and cancel if so.

Put this at the top of each toggle function:

if($("#sidebar:animated, #canvas:animated").length) {
  e.preventDefault();
  return;
}

var toggling = false
$('#toggle').toggle(function() {
if(!toggling)
{
toggling = true;
  // perform something
toggling = false; //or put it in a callback function of animate,show,hide,slide and fade
}
}, function() {
if(!toggling)
{
toggling = true;
  // perform something
toggling = false; //or put it in a callback function of animate,show,hide,slide and fade
}
});