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取消动画也是一个好主意。

在函数执行jquery之后切换关闭单击状态

1 个答案: