jquery - 如何在jquery中延迟动画

Question

我是 jquery 的新手，我为一个页面创建了一个隐藏/显示动画，这个动画的作用是当你将鼠标悬停在“调用我们”链接上时，它会显示一个电话 (1800blabla)，但现在我已经有人问电话号码在再次隐藏之前应该有延迟。我将不胜感激任何帮助。请在下面找到代码。

HTML

<ul class="top-links">
<li>
    <div id="call-us">
     <a class="showPhoneNumberLink" href="#">Call Us</a>
      <span class="showPhoneNumberNumber">1.888.227.6482</span>
    </div>
</li>
</ul>

jQuery

    $('#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;
    });

CSS

#call-us span.showPhoneNumberNumber {display:none}

Answer 1

延迟三秒:

_this.parent()
    .delay(3000)
    .animate({ 'width': '78px' }, 500);