Question

I have 3 buttons each calling a function that animates the different content into view. If the user is quick they can click 2 buttons, this messes with the animation temporary. How can I call only one function at a time?

The display is set to inline-block from none to make the content visible, the means when 2 animations are playing they align next to each other.

Here is my code for one of the functions, the 2nd is identical except the element ID’s correspond with what I need moved. Each button calls one of these functions.

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

Try to modify to this:

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

This will only allow to click the second button if no animation is currently running.