bascule jquery, prévenez cliquant pendant bascule

Question

Vu le code jquery suivant ..

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); 

    }); 
}; 

alors c'est le fichier html réel ...

$('#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'); 
        }); 
       }); 
      }); 

est-il un moyen d'empêcher le basculement de être tiré à nouveau si quelqu'un clique pendant qu'il exécute la fonction? J'ai référencé Tell jQuery to ignore clicks during an animation sequence et la technique n'a pas fonctionné.

Answer 1

Vous pouvez faire quelque chose comme ceci, vérifiez si quelque chose que vous animez est en train d'animer et annulez si c'est le cas.

Mettre ce en haut de chaque fonction de bascule:

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

Answer 2

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 
} 
});