Question

我有3个按钮，每个按钮调用一个功能，将不同的内容设置为视图。如果用户很快就可以点击2个按钮，这会使动画暂时混乱。我怎样才能一次只调用一个函数？

显示设置为无内联块以使内容可见，这意味着当2个动画正在播放时它们彼此相邻。

这是我的其中一个函数的代码，第二个是相同的，除了元素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);
        }});
    }
}

Answer 1

禁用第二个按钮使用回调函数或.promise()，在按钮1的动画结束时启用它。

Answer 2

尝试修改为：

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;});
        }});
    }
}

如果当前没有动画正在运行，则只允许单击第二个按钮。

Answer 3

您可以在开始动画之前禁用按钮。

jQuery导航：一次只调用一个函数？

3 个答案: