功能執行後切換關閉點擊狀態jquery

Question

我有一個按鈕的行爲問題。該按鈕在mouseover mouseleave狀態下切換，點擊時會觸發另一個滑動以打字機方式動畫的文本的功能。

我想要做的是在動畫播放過程中禁用/切換點擊狀態（如果您單擊多次，可以看到該字符串會發生什麼情況），並在動畫完成後重新啓用它。

我搜索了類似的問題，並試圖實現一些邏輯，但似乎無法使其工作。也許問題不是按鈕，而是字符串的執行方式，我真的很感謝任何幫助，它一直讓我瘋狂！

真誠的感謝和問候！

$(document).ready(function() { 
$('#btn-icon').on("mouseover mouseleave", expand); 

$('#btn-icon').on("click", function (evt) { 
    $('#btn-icon').off("mouseover mouseleave", expand); 
    expandAll(); 
}); 

}）;

function expand(evt) { 
$('#btn-icon').toggleClass("expand"); 
$('#btn-text').fadeToggle('2000'); 

console.log('expand'); 

}

全碼/的jsfiddle：

http://jsfiddle.net/shinobisan/vCVVZ/1/

Answer 1

你可以使用一個變量來表示如果動畫當前正在運行（see the fiddle）：

var isActive = false; 
$(document).ready(function() { 
    $('#btn-icon').off("mouseover mouseleave", expand); 
    if(!isActive) {isActive = true; expandAll(); } 
}); 

// and inside expandAll when animation is done, 
// you set the isActive to false again. 
$.each(para_text.split(''), function (i, letter) { 
    setTimeout(function() { 
    }, 100 * i, function() { 
     isActive = false; 
    }); 
}); 

用.stop取消動畫是al所以一個好主意。