How do I make these functions run only when previous has completed in jQuery?
<p>I have a hover event, and on hover, I need to set the size of the subnav,add a class to it depending on how wide it is, then show the subnav.  The trouble is, as it is now, it shows the subnav having the original size on first hover, then when I hover a second time it has resized the subnav.</p>

<p>So how do I chain 3 things to run only after the previous has completed:</p>

<ol>
<li>setSubNavWidth2()</li>
<li>setSubMenuPos()</li>
<li><p>$(this).children('.sub-menu-div').css('visibility', 'visible');</p>

<pre><code> $('.dir').hover(        
        function(){
          if($(this).children('.sub-menu-div').length&gt;0){
             var subnav=$(this).children('.sub-menu-div');
             setSubMenuPos(subnav);
             setSubNavWidth2(subnav);
               $(this).children('.sub-menu-div').css('visibility', 'visible');
          }              
            $(this).children('.top-level-link').addClass('hoverstyle');              
        },
      function(){
             $(this).children('.sub-menu-div').css('visibility', 'hidden');
             $(this).css('background-color','transparent')
             $(this).children('.top-level-link').removeClass('hoverstyle');

        }
    );      

function setSubNavWidth2(element){
     var sub_nav_width = various calculations that set sub nav width
       $(element).width(sub_nav_width );
}

 function setSubMenuPos(element){
       //set posiiton of menu
            var position = $(element).parent().position();
            var xPos = position.left;
            var width = $(element).width();
            var parentWidth = $(element).parent().width();
            var newXpos = xPos + parentWidth;
            if(xPos + width &gt; 950 ){                
                  $(element).removeClass('left');
                   $(element).addClass('right');
            }


    }
</code></pre></li>
</ol>
