title: Sliding hover menu text toggle not fitting in
body: <p>I am trying to create a menu that on item hover the width of the item slides, with the background image to the right, and text appears on the left. Now when I do that, the appearing of the text is not looking good - the text is doing some jumping effect.. Can anyone help me fix this menu?</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;ul id="menu" align="center"&gt;
  
  &lt;a title="Passwords Management" href="admin-passwords-management.php"&gt;&lt;li id="menu-item" class="menu-first"&gt;&lt;p class="" style="display: none;"&gt;Passwords management&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
          &lt;li id="menu-item" class="website-not-active"&gt;&lt;img src="../dashboard/images/menu2.png"&gt;&lt;/li&gt;
          &lt;a href="admin-facebook-management.php"&gt;&lt;li id="menu-item" class="menu-third"&gt;&lt;p class="" style="display: none;"&gt;Facebook apps management&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
          &lt;a href="admin-email-management.php"&gt;&lt;li id="menu-item" class="menu-fourth"&gt;&lt;p class="" style="display: none;"&gt;Email management&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="dashboard-billing.php"&gt;&lt;li id="menu-item" class="menu-bill"&gt;&lt;p class="" style="display: none;"&gt;Billing management&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
          &lt;a href="dashboard_client_settings.php"&gt;&lt;li id="menu-item" class="menu-fifth"&gt;&lt;p class="" style="display: none;"&gt;Client info&lt;/p&gt;&lt;!--&lt;img src="../dashboard/images/menu5.png"/&gt;--&gt;&lt;/li&gt;&lt;/a&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>and the JS:</p>
  
  <pre><code>$(".menu-first").on({
      mouseenter: function() {
      $(this).addClass("hover");
      $(".menu-first p").addClass("normal");
      $(".normal").toggle("fast");
      },
      mouseleave: function() {
      $(this).removeClass("hover");
      $(".normal").toggle("fast");
      $(".menu-first p").removeClass("normal");
      }
  });
  
  $(".menu-bill").on({
      mouseenter: function() {
      $(this).addClass("hover");
      $(".menu-bill p").addClass("normal");
      $(".normal").toggle("fast");
      },
      mouseleave: function() {
      $(this).removeClass("hover");
      $(".normal").toggle("fast");
      $(".menu-bill p").removeClass("normal");
      }
  });
  
  $(".menu-second").on({
      mouseenter: function() {
          $(this).addClass("hover");
      $(".menu-second p").addClass("normal");
      $(".normal").toggle("fast");
  $(".menu-second p").fadeIn(200);
      },
      mouseleave: function() {
          $(this).removeClass("hover");
      $(".normal").toggle("fast");
      $(".menu-second p").removeClass("normal");
  $(".menu-second p").fadeOut(200);
  
      }
  });
  
  $(".menu-third").on({
      mouseenter: function() {
          $(this).addClass("hover");
      $(".menu-third p").addClass("normal");
      $(".menu-third p").toggle("fast");
      },
      mouseleave: function() {
          $(this).removeClass("hover");
      $(".normal").toggle("fast");
      $(".menu-third p").removeClass("normal");
  
      }
  });
  
  $(".menu-fourth").on({
      mouseenter: function() {
          $(this).addClass("hover");
      $(".menu-fourth p").addClass("normal");
      $(".normal").toggle("fast");
      },
      mouseleave: function() {
          $(this).removeClass("hover");
      $(".normal").toggle("fast");
      $(".menu-fourth p").removeClass("normal");
  
      }
  });
  
  $(".menu-fifth").on({
      mouseenter: function() {
      $(this).addClass("hover");
      $(".menu-fifth p").addClass("normal");
      $(".normal").toggle("fast");
      },
      mouseleave: function() {
      $(this).removeClass("hover");
      $(".normal").toggle("fast");
      $(".menu-fifth p").removeClass("normal");
  
      }
   });
  </code></pre>
  
  <p>Here is a the <a href="http://jsfiddle.net/ZeBaZ/" rel="nofollow">jsFiddle</a></p>