在函数执行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 取消动画也是个好主意。