0

我有 3 个按钮，每个按钮调用一个将不同内容动画化到视图中的函数。如果用户很快，他们可以单击 2 个按钮，这会使动画暂时混乱。如何一次只调用一个函数？

显示从无设置为 inline-block 以使内容可见，这意味着当 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);
        }});
    }
}
4

3 回答 3

1

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

于 2012-10-23T12:42:34.317 回答
1

尝试修改为：

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-23T12:42:58.253 回答
1

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

于 2012-10-23T12:43:18.690 回答