title: jQuery: Delay between addclass()
body: <p>I've got the problem, that I tried to set my delay like the following post:
  <a href="https://stackoverflow.com/questions/2510115/jquery-can-i-call-delay-between-addclass-and-such">stackoverflow: jQuery: Can I call delay() between addClass() and such?</a>
  But it doesnt work for me.</p>
  
  <p><a href="http://jsfiddle.net/usascj4o/12/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>$( "#nav2" ).click(function() {
      var notshown = $("#dropdown1", "#dropdown2");
      var dropdown2 = $("#dropdown2");
      if (dropdown2.hasClass( "unselected" ) || dropdown2.hasClass( "unshown" ) ) {
          notshown.removeClass('unshown').delay(1000).queue(function(){
              var dropdown1 = $("#dropdown1");
              var dropdown2 = $("#dropdown2");
              var navwrapper = $("#navwrapper");
              dropdown1.removeClass('unselected');
              dropdown2.removeClass('unselected');
              navwrapper.removeClass('unselected');
              dropdown1.addClass('unselected').dequeue();
              };
  
      }else{
          dropdown2.addClass('unshown');
          navwrapper.addClass('unselected');
          dropdown1.addClass('unshown');
      }
  });
  </code></pre>
  
  <p>Also tried with fadeIn/Out, but still no movement.</p>
  
  <p><a href="http://jsfiddle.net/usascj4o/9/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>$("#nav1").click(function () {
      var dropdown1 = $("#dropdown1");
      var dropdown2 = $("#dropdown2");
      var navwrapper = $("#navwrapper");
      if (dropdown1.hasClass("unshown")) {
          dropdown1.removeclass('unshown');
          dropdown1.delay(200).fadeIn(500).delay(200);
          navwrapper.removeclass('unshown');
      } else {
          dropdown2.addclass('unshown');
          navwrapper.addclass('unshown');
          dropdown1.delay(200).fadeOut(500);
          dropdown1.addclass('unshown');
      };
  };
  </code></pre>