Как задержать анимацию в jquery - PullRequest
Новая
       3

Как задержать анимацию в jquery

3 голосов
/ 05 августа 2010

Я новичок в 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}

Ответы [ 3 ]

4 голосов
/ 05 августа 2010

Чтобы задержать три секунды: 

_this.parent()
    .delay(3000)
    .animate({ 'width': '78px' }, 500);
2 голосов
/ 05 августа 2010

Вам, вероятно, следует использовать метод setTimeout() в JavaScript. Ясное, краткое руководство по его использованию доступно здесь .

1 голос
/ 05 августа 2010

Вот обновление.Обратите внимание на функцию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...