functions with jquery animations, wait till one finsihes before the other starts

Discussion in 'jQuery' started by freedominator123, Jul 12, 2013.

  1. #1
    the animation works perfectly if you open and close the same tab, but as soon as u start clicking on other tabs it bugs up a little
    this is because when u click on another tab, it closes the current one
    if i can make the opening tab wait until the current tab closes, i think the bug will be fixed, but i don't know how to do that
    the javascript is at the bottom of the page
    http://patrickallard.net63.net/
    and ill post it here for convenience sake
    
    <script>
    
    //page dimentions
    var tabWidth=300;
    var tabHeight=document.getElementById("experienceshadow").clientHeight;
    var defaultSpeed=400;
    var numRows=2;
    
    //tab constructer
    function tab(divID,row,col)
    {
        // jquery referencer
        this.div=$('div#'+divID);
        
        // store dimentions of divs into variables
        this.height=document.getElementById(divID).clientHeight;
        
        // row and column of tab iterates from 0
        this.row=row;
        this.col=col;
        
        // position of tabs based on row and column number
        this.left=col*parseInt(tabWidth);
        this.top=row*parseInt(tabHeight);
    
        // when page initializes, all windows are open, before the initilization fucntion which closes them all
        // thus we have to set all to open so initilization function sets them to false when closing them
        this.open=true;
        
        // toggle boolian to determine if div is open or closed
        this.toggle=toggle;
        function toggle()
        {
            if(this.open==true)
            {
                this.open=false;
            }
            else
            {
                this.open=true;
            }
        }
    }
    
    // create tabs
    experience=new tab("experience",0,0);
    education=new tab("education",0,1);
    software=new tab("software",0,2);
    codesamples=new tab("codesamples",1,0);
    references=new tab("references",1,1);
    links=new tab("links",1,2);
    
    // jquery functions to open and close tabs
    (function() 
    {
        // close a tab
        $.fn.CloseHopin = function(currentTab) 
        {
            return $(this).animate
            (
                {
                    'height': tabHeight+'px',
                }
                , defaultSpeed || 400
            )
            .animate
            (
                {
                    'left': currentTab.left+'px',
                    'width': tabWidth+'px',
                }
                , defaultSpeed || 400
            )
            .animate
            (
                {
                    'top': currentTab.top+'px',
                }
                , defaultSpeed || 400
            );
        }
    
        // open a tab
        $.fn.OpenHopin = function(currentTab) 
        {
            return $(this).animate
            (
                {
                    'top': (tabHeight*numRows)+'px',
                }
                , defaultSpeed || 400
            )
            .animate
            (
                {
                    'left': '0px',
                    'width': '900px',
                }
                , defaultSpeed || 400
            )
            .animate
            (
                {
                    'height': currentTab.height+'px',
                }
                , defaultSpeed || 400
            );
        }
    
        // function to open or close a tab
        $.fn.OpenToggle = function(currentTab) 
        {
        
            // if its open close it
            if(currentTab.open)
            {
                currentTab.toggle();
                $(this).CloseHopin(currentTab);
            }
            
            // if its closed open it
            else
            {
            
                // close other windows if they are open, then open the clicked window
                // error here
                if(experience.open)
                {
                    experience.div.toggle();
                    experience.div.CloseHopin(experience);
                }
                if(education.open)
                {
                    education.div.toggle();                
                    education.div.CloseHopin(education);
                }
                if(software.open)
                {
                    software.div.toggle();
                    software.div.CloseHopin(software);
                }
                if(codesamples.open)
                {
                    codesamples.div.toggle();
                    codesamples.div.CloseHopin(codesamples);
                }
                if(references.open)
                {
                    references.div.toggle();
                    references.div.CloseHopin(references);
                }
                if(links.open)
                {
                    links.div.toggle();
                    links.div.CloseHopin(links);
                }
                currentTab.toggle();
                $(this).OpenHopin(currentTab);
            }
        };
    
        // add functions to the tabs
        experience.div.on('click', function() {
            experience.div.OpenToggle(experience);
        });    
        education.div.on('click', function() {
            education.div.OpenToggle(education);
        });    
        software.div.on('click', function() {
            software.div.OpenToggle(software);
        });    
        codesamples.div.on('click', function() {
            codesamples.div.OpenToggle(codesamples);
        });    
        references.div.on('click', function() {
            references.div.OpenToggle(references);
        });    
        links.div.on('click', function() {
            links.div.OpenToggle(links);
        });    
    })();
    
    // when page initializes, close all tabs
    (function() {
            experience.div.OpenToggle(experience);
            education.div.OpenToggle(education);
            software.div.OpenToggle(software);
            codesamples.div.OpenToggle(codesamples);
            references.div.OpenToggle(references);
            links.div.OpenToggle(links);
    })();
    </script>
    
    Code (markup):

     
    freedominator123, Jul 12, 2013 IP
  2. ekim941

    ekim941 Member

    Messages:
    74
    Likes Received:
    7
    Best Answers:
    7
    Trophy Points:
    33
    #2
    You'll need to add another argument to your animate function (a callback function)
    Or a better approach might be to use .stop() to clear the animation queue before starting the next animation.
    http://api.jquery.com/stop/
    http://api.jquery.com/animate/
     
    ekim941, Jul 13, 2013 IP
  3. freedominator123

    freedominator123 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    i want the animation to complete not stop()
    maybe i can pass the fuction "tab.OpenHopen()" as a parameter to "tab.OpenToggle()"
    and then use .complete to call the correct "tab.OpenHopen()" method on the correct tab object inside the tab.OpenToggle() method
     
    freedominator123, Jul 14, 2013 IP
  4. ekim941

    ekim941 Member

    Messages:
    74
    Likes Received:
    7
    Best Answers:
    7
    Trophy Points:
    33
    #4
    Then use the callback function (the last parameter in animate). This will get called when the animation is complete. Even if you use it just to set a test condition like "ready = true."
     
    ekim941, Jul 15, 2013 IP