All geek questions in one place

How to delay animation in jquery

I'm new to jquery and I created a hide / show animation for the page, which does this animation when you hover over the “Call us” link, it shows the phone (1800blabla), but now I was asked what the phone number is must have a delay before he returns again. I would 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}
+3
source share
3 answers

Here's the update. Notice the setTimeout function, which wraps methods inside the 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>
+1
source

To hold for three seconds:

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

, setTimeout() JavaScript. , , , .

+2

Source: https://habr.com/ru/post/1758243/

More articles:


All Articles