CODEWITHSUNDEEP
jqueryhtmlcss
Ozzy
Ozzy

Reputation: 915

How to delay an animation in jquery

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.

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}

Upvotes: 3

Views: 298

Answers (3)

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

Here's an update. Notice the setTimeout function wrapping the methods inside 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>

Upvotes: 1

Ken Redler
Ken Redler

Reputation: 23943

To delay three seconds:

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

Upvotes: 4

esqew
esqew

Reputation: 44711

You should probably use the setTimeout() method in JavaScript. A clear, concise tutorial on how to use it is available here.

Upvotes: 2

Related Questions