如何在jquery中延迟动画

问题描述：

我对jquery有点新，我为页面创建了一个隐藏/显示动画，这个动画的功能是当你将鼠标悬停在“Call us”上时，它显示一个手机（ 1800blabla），但现在我被问到电话号码应该有一个延迟，然后再隐藏起来。我会感谢任何帮助。请找到下面的代码。如何在jquery中延迟动画

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}

答

以下是更新。注意setTimeout函数包装了mouseleave中的方法。

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 

     $('#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() { 
        setTimeout(function() { 
         var _this = $('#call-us a.showPhoneNumberLink'); 
         _this.show(); 
         _this.parent().find('span').hide(); 
         _this.parent().animate({ 'width': '45px' }, 800); 
          return false; 
        }, 1000); 
      }); 
     }); 
    </script> 
</head> 
<body> 

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


</body> 
</html>

这工作得很好，但是......我在寻找的电话号码从右侧滑动。 – Ozzy 2010-08-05 16:57:12

这就是我一直在寻找的。非常感谢。 – Ozzy 2010-08-05 18:06:06

答

你或许应该在JavaScript中使用setTimeout()方法。有关如何使用它的清晰简明教程可用here.

答

要时滞的三个秒时：

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

如何在jquery中延迟动画

相关推荐