title: How to delay an animation in jquery
body: <p>I'm kinda new to jquery and I have created an hide/show animation for a page, what this animation does is when you hover on the link "Call us" it shows a phone (1800blabla) but now I've been asked that the phone number should have a delay before it hides back again. I will appreciate any help. Please find the code below.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="top-links"&gt;
  &lt;li&gt;
      &lt;div id="call-us"&gt;
       &lt;a class="showPhoneNumberLink" href="#"&gt;Call Us&lt;/a&gt;
        &lt;span class="showPhoneNumberNumber"&gt;1.888.227.6482&lt;/span&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>    $('#call-us a.showPhoneNumberLink').mouseenter(
        function() {
              var _this = $(this);
              _this.hide();
              _this.parent().width(0);
              _this.parent().find('span').show();
              _this.parent().animate({ 'width': '78px' }, 500);
                  return false;
      });
  $('ul.top-links').mouseleave(
          function() {
              var _this = $('#call-us a.showPhoneNumberLink');
              _this.show();
              _this.parent().find('span').hide();
              _this.parent().animate({ 'width': '45px' }, 800);
                  return false;
      });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#call-us span.showPhoneNumberNumber {display:none}
  </code></pre>