不知道在哪裏把「.stop（）」放在我的jQuery腳本中

Question

我正在用一些jQuery效果更新我的客戶端的web畫廊。我已經做了一些成功的改變，但是現在我對最後的腳本有問題。一切工作正常，但當你快速點擊開始，動畫打破常規模式，一切都是一團糟。我知道我需要使用stop（）函數，但我不能使它工作100％，因爲它應該工作。

$(function() { 
    $(".gallery_view_switch").toggle(function() { 

     $(this).html('Switching ...'); 
     $(".sidebar").slideToggle('slow', function() { 
      $(".single_page").animate({width: 870}, 700), 
      $('img.gallery').css('margin-left', '5px'), 
      $('#top').css('margin-right', '-290px'), 
      $('.gallery_view_switch').html('Show gallery navigation'); 
     }); 

    },function() { 

     $(this).html('Switching ...'); 
     $('img.gallery').css('margin-left', '12px'), 
     $(".single_page").animate({width: 550}, 700, function() { 
      $('#top').css('margin-right', '30px'), 
      $(".sidebar").slideToggle('slow'), 
      $('.gallery_view_switch').html('Hide gallery navigation'); 
     }); 
    }); 
}) 

所以，我們有一個「上點擊」這裏的行動，側邊欄與畫廊導航上升和內容獲得額外的尺寸和新的CSS屬性的圖像，使畫廊現在有更多更廣泛的觀點。

第二次點擊時，內容獲取原始大小和屬性，側邊欄切換回原始位置。

我在這裏想要做的是停止動畫隊列的額外點擊，並且不允許在所有事情都已準備就緒之前發生新的動畫。

謝謝！

編輯2：

$(function() { 

    var isExpanding = false; 

    $(".gallery_view_switch").toggle(function() { 

     if(!isExpanding) {   

      $(this).html('Switching ...'); 

      $(".sidebar").slideToggle('slow', function() { 

       isExpanding = true; 

       $(".single_page").animate({ 
        width: 870 
       }, 700), 
       $('img.gallery').css('margin-left', '5px'), 
       $('#top').css('margin-right', '-290px'), 
       $('.gallery_view_switch').html('Show gallery navigation'); 

       isExpanding = false; 

      }); 
     } 
    },function() { 
     if(!isExpanding) { 

      $(this).html('Switching ...'); 
      $('img.gallery').css('margin-left', '12px'), 

      $(".single_page").animate({ 
       width: 550 
      }, 700, function() { 

       isExpanding = true; 


       $('#top').css('margin-right', '30px'), 
       $(".sidebar").stop().slideToggle('slow'), 
       $('.gallery_view_switch').html('Hide gallery navigation'); 

       isExpanding = false; 

      }); 
     } 
    }); 

}) 

而另一位編輯，仍然沒有工作...我真的不明白，究竟是什麼我必須在這裏改變，使其工作？我嘗試了很多真正的/錯誤的組合，沒有成功，它以前工作過，有重疊。或者在一些真/假組合中，它被完全鎖定，並且一旦展開就不能返回。

Answer 1

我會做這樣的避免雙重事件：

$(function() { 

var isExpanding = false; 

$(".gallery_view_switch").toggle(function() { 

    if(!isExpanding) { 
     //stuff 
     $(".sidebar").slideToggle('slow', function() { 
      isExanding = true; 
      //Do your stuff 
      isExpanding = false; 
     }); 
    } 
},function() { 
    if(!isExpanding) { 
     $(".single_page").animate({width: 550}, 700, function() { 
      isExanding = true; 
      //Do your stuff 
      isExpanding = false; 
     }); 
    } 
}); 

Answer 2

在動畫功能的使用.stop()：

$(function() { 
    $(".gallery_view_switch").toggle(function() { 

     $(this).html('Switching ...'); 
     $(".sidebar").stop().slideToggle('slow', function() { 
      $(".single_page").stop().animate({width: 870}, 700), 
      $('img.gallery').css('margin-left', '5px'), 
      $('#top').css('margin-right', '-290px'), 
      $('.gallery_view_switch').html('Show gallery navigation'); 
     }); 

    },function() { 

     $(this).html('Switching ...'); 
     $('img.gallery').css('margin-left', '12px'), 
     $(".single_page").stop().animate({width: 550}, 700, function() { 
      $('#top').css('margin-right', '30px'), 
      $(".sidebar").stop().slideToggle('slow'), 
      $('.gallery_view_switch').html('Hide gallery navigation'); 
     }); 
    }); 
})