title: Jquery effects wait for previous to finish before running
body: <p>I want three events to run after another so 1st line finishes then second line starts after that 3rd line start...so next element(effect) should wait until previous effect is finished?</p>
  
  <p>Thanks</p>
  
  <p><strong>ORIGINAL CODE:</strong></p>
  
  <pre><code>$('.login_menu_arrow.top').click(function(event)
  {
      $("#login_menu").slideUp();
      $('.login_menu_arrow.top').hide();
      $('.login_menu_arrow.bottom').show();
      event.stopPropagation();
  });
  </code></pre>
  
  <p>My test which won't work:</p>
  
  <p>Source: <a href="https://stackoverflow.com/questions/3730775/a-way-to-chain-a-sequence-of-events-in-jquery">A way to chain a sequence of events in JQuery?</a></p>
  
  <p><strong>1:</strong></p>
  
  <pre><code>$('.login_menu_arrow.top').click(function(event)
  {
      $("#login_menu").slideUp(function() {
          $('.login_menu_arrow.top').hide(function() {
              $('.login_menu_arrow.bottom').show();
          });
      });
  });
  </code></pre>
  
  <p>Source: <a href="https://stackoverflow.com/questions/1065806/how-do-you-get-jquery-to-wait-until-an-effect-is-finished">How do you get JQuery to wait until an effect is finished?</a></p>
  
  <p><strong>2:</strong></p>
  
  <pre><code>$('.login_menu_arrow.top').click(function(event)
  {
      $(this).queue(function() {
          $("#login_menu").slideUp();
          $(this).dequeue();
      }).queue(function() {
          $('.login_menu_arrow.top').hide();
          $(this).dequeue();
      }).queue(function() {
          $('.login_menu_arrow.bottom').show();
          $(this).dequeue();
      });
  });
  </code></pre>