Question

Hey guys this is a snippet of my current code. I want to know how to add an “onFinish or Finished” event listener to this code.

this is the setStage function

    function setStage($section)
    {

    switch($section)
    {
        case "about":
            if (stageSet == true)
            {
                resetStage();
            }
            $("#one").animate({ width: "+=30", height: "+=30"}, 1000);
            $("#two").animate({ width: "+=30", height: "+=30"}, 1000);
            $("#three").animate({ height: "+=30"}, 1000);
            $("#four").animate({ width: "+=30"}, 1000);
            $("#five").animate({ width: "+=30"}, 1000);
            stageSet = true;
            break;
        case "portfolio":
            if (stageSet == true)
            {
                resetStage();
            }
            $("#one").animate({ width: "+=30", height: "+=30"}, 1000);
            $("#two").animate({ width: "+=30", height: "+=30"}, 1000);
            $("#three").animate({ height: "+=30"}, 1000);
            $("#four").animate({ width: "+=30"}, 1000);
            $("#five").animate({ width: "+=30"}, 1000);
            stageSet = true;
            break;
        case "contact":
            if (stageSet == true)
            {
                resetStage();
            };
            $("#one").animate({ width: "+=30", height: "+=30"}, 1000);
            $("#two").animate({ width: "+=30", height: "+=30"}, 1000);
            $("#three").animate({ height: "+=30"}, 1000);
            $("#four").animate({ width: "+=30"}, 1000);
            $("#five").animate({ width: "+=30"}, 1000);
            stageSet = true;
            break;
        case "resume":
            if (stageSet == true)
            {
                resetStage();
            }
            $("#one").animate({ width: "+=30", height: "+=30"}, 1000);
            $("#two").animate({ width: "+=30", height: "+=30"}, 1000);
            $("#three").animate({ height: "+=30"}, 1000);
            $("#four").animate({ width: "+=30"}, 1000);
            $("#five").animate({ width: "+=30"}, 1000);
            stageSet = true;
            break;
        default:
            alert('not a valid section');
            break;
        }
    }

the animations inside each case will be unique, but I just made the animations identical for now. Below is what happens on the click. What I need it to do is apply a class “off” to each nav, which it does, and then when setStage is finished I need it to take off the class

$(".nav-btn").click(function()
{
    var section = $(this).attr("title");
    //turn off pointer for obsessive clickers
    $(".nav-btn").addClass("off");

    onComplete: function(setStage(section)
    {
        $(".nav-btn").removeClass("off");
    });
});

this of course doesn’t work. The setStage function works great, what I want to do is remove the class when the function finishes. I checked the api event section on the jquery site and didn’t see anything that would suffice, maybe I’m just not looking hard enough. http://api.jquery.com/category/events/ or maybe I’m looking in the wrong section all together. Any thoughts? Thanks in advance for assisting me in my noobness.

Answer 1

var removeClass = function() {
    $(this).removeClass("off");
}


    function setStage($section)
{

switch($section)
{
    case "about":
    case "portfolio":
    case "resume":    // and so on

        if (stageSet == true)
        {
            resetStage();
        }
        $("#one").animate({ width: "+=30", height: "+=30"}, 1000, removeClass );
        $("#two").animate({ width: "+=30", height: "+=30"}, 1000, removeClass);
        $("#three").animate({ height: "+=30"}, 1000, removeClass);