jQuery導航：一次只調用一個函數？

我有3個按鈕，每個按鈕都會調用一個函數，將不同的內容動畫到視圖中。如果用戶很快，他們可以點擊2個按鈕，這與臨時動畫混淆。我怎樣才能一次只打一個功能？jQuery導航：一次只調用一個函數？

將顯示設置爲從無到內嵌塊以使內容可見，這是兩個動畫播放時的方式，它們彼此相鄰。

這是我的代碼之一的功能，第二個是相同的，除了元素ID與我需要移動的相應。每個按鈕都會調用其中一個功能。

function mepage(){ 
var ele = document.getElementById("btn2"); 
var ele = document.getElementById("btn3"); 
var mecont = document.getElementById("mecontent"); 
if ($(ele).is(':visible')) 
{ 
    $("#btn2,#btn3").slideUp(1000, function() { 
     $("#mecontent").fadeIn(800).css("display","inline-block"); 
    }); 
} 
else { 
    $("#mecontent").fadeOut(800, function() { 
     $("#mecontent").css("display","none"); 
     if(ele.style.display == "none"){ 
      $("#btn2,#btn3").slideDown(1000); 
     }}); 
    } 
}

來源

2012-10-23 Aaron

小心一把小提琴？ – Nelson

試圖修改此：

var animation_enabled = true; 
function mepage(){ 
if(!animation_enabled)return; 
animation_enabled = false; 
var ele = document.getElementById("btn2"); 
var ele = document.getElementById("btn3"); 
var mecont = document.getElementById("mecontent"); 
if ($(ele).is(':visible')) 
{ 
    $("#btn2,#btn3").slideUp(1000, function() { 
     $("#mecontent").fadeIn(800, function() {animation_enabled =true;}).css("display","inline-block"); 
    }); 
} 
else { 
    $("#mecontent").fadeOut(800, function() { 
     $("#mecontent").css("display","none"); 
     if(ele.style.display == "none"){ 
      $("#btn2,#btn3").slideDown(1000, function() {animation_enabled =true;}); 
     }}); 
    } 
}

這將只允許點擊第二個按鈕，如果沒有動畫當前正在運行。

來源

2012-10-23 12:42:58 tobspr

不錯的一個！完全解決了我的問題:) – Aaron

禁用第二個按鈕。
使用回調函數或.promise()，當按鈕1的動畫完成時啓用它。

來源

2012-10-23 12:42:34 RASG

我認爲這可能是最好的選擇。這樣用戶就知道單擊該按鈕不會做任何事情，這是更好的用戶體驗。 –

您可以在開始動畫之前禁用按鈕。

來源

2012-10-23 12:43:18 LJ2

jQuery導航：一次只調用一個函數？

回答

相關問題