jQuery Looping Animation каждый раз останавливается. Как удержаться от паузы? - PullRequest
Новая
       29

jQuery Looping Animation каждый раз останавливается. Как удержаться от паузы?

9 голосов
/ 29 января 2010

Я пытаюсь заставить блок "пульсировать" между 100% непрозрачностью и некоторой частично прозрачной непрозрачностью. Я хочу сделать это с помощью функциональности, встроенной в ядро ​​jQuery, если это возможно. Я бы предпочел не добавлять плагин, чтобы получить этот эффект. Вот код, который я пытаюсь использовать: 

    $(document).ready(function() {
 function pulsate() {
  $("#pulsating-block").animate({opacity: 0.2}, 3000).animate({opacity: 1}, 3000, null, function() {pulsate()});
 }
 pulsate();  });

Проблема в том, что каждый раз, когда анимация завершается, она останавливается примерно на секунду перед повторным циклом. Как я могу удержать его от паузы, чтобы получить плавный «пульсирующий» эффект? (Примечание. В этом примере анимация преувеличена, чтобы подчеркнуть возникшую у меня проблему)

Ответы [ 2 ]

11 голосов
/ 30 января 2010

Возможно, ваша проблема связана с "swing" функцией замедления, используемой jQuery по умолчанию.

Вместо этого вы можете попробовать "линейную" функцию замедления: 

$(document).ready(function() {
  function pulsate() {
    $("#pulsating-block").
      animate({opacity: 0.2}, 3000, 'linear').
      animate({opacity: 1}, 3000, 'linear', pulsate);
  }
  pulsate();
});

Я также написал небольшой плагин пульсата, который включает в себя «отскок» функцию замедления, которая может быть вам больше по вкусу. Я должен отметить, что плагин использует непрерывный расчет для выполнения анимации, а не две отдельные анимации постепенного появления / исчезновения, так что это может помочь с проблемой "паузы". (Если честно, я все еще не вижу паузы, о которой вы говорите.)

Рабочая демоверсия

http://jsbin.com/isicu (редактируется через http://jsbin.com/isicu/edit)

Полный источник

JavaScript 

(function ($) {
  $.fn.pulsate = function (properties, duration, type, speed, callback) {
    type = type || 'Swing'
    speed = speed || 'Normal';
    this.animate(properties, duration, 'pulsate' + type + speed, callback);
  };

  function createPulsateLinear (speed) {
    speed *= 2;
    return function (p, n) {
      return (Math.asin(Math.sin(Math.PI * n / speed)) + Math.PI / 2) / Math.PI;
    }
  }

  function createPulsateSwing (speed) {
    return function (p, n) {
      return (1 + Math.sin(n / speed)) / 2;
    }
  }

  function createPulsateBounce (speed) {
    speed *= 2;
    return function (p, n) {
      return (
        ((Math.asin(Math.sin(Math.PI * n / speed)) + Math.PI / 2) / Math.PI) *
        (Math.sin(Math.PI * n / speed) + 1) / -2 + 1
      );
    }
  }

  var speeds = {
    fast: 100,
    normal: 200,
    slow: 400
  }

  $.extend(jQuery.easing, {
    pulsateLinearFast: createPulsateLinear(speeds.fast),
    pulsateLinearNormal: createPulsateLinear(speeds.normal),
    pulsateLinearSlow: createPulsateLinear(speeds.slow),
    pulsateSwingFast: createPulsateSwing(speeds.fast),
    pulsateSwingNormal: createPulsateSwing(speeds.normal),
    pulsateSwingSlow: createPulsateSwing(speeds.slow),
    pulsateBounceFast: createPulsateBounce(speeds.fast),
    pulsateBounceNormal: createPulsateBounce(speeds.normal),
    pulsateBounceSlow: createPulsateBounce(speeds.slow)
  });
})(jQuery);

$(document).ready(function() {
  var
    pulsatingBlocks = $('.pulsating-block'),
    forever = 5 * 24 * 60 * 60 * 1000; // 5 days! (Which is forever in Internet time)

  pulsatingBlocks.filter('.opacity').each(function () {
    $(this).pulsate({opacity: 0.2}, forever, this.className.split(' ')[0], 'Slow');
  });

  pulsatingBlocks.filter('.top').each(function () {
    $(this).pulsate({top: 100}, forever, this.className.split(' ')[0], 'Slow');
  });

});

HTML 

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<meta charset=utf-8 />
<title>Pulsate</title>
<style>
  div { clear: left; margin-bottom: 2em; }
  .pulsating-block {
    width: 6em; height: 4em;
    margin: 0.5em; margin-right: 10em;
    float: left; clear: none; position: relative;
    background: lightblue;
    text-align: center;
    padding-top: 2em;
    font: bold 1em sans-serif;
  }
</style>
</head>
<body>
  <div>
    <div class="Linear opacity pulsating-block">linear</div>
    <div class="Swing opacity pulsating-block">swing</div>
    <div class="Bounce opacity pulsating-block">bounce</div>
  </div>
  <div>
    <div class="Linear top pulsating-block"></div>
    <div class="Swing top pulsating-block"></div>
    <div class="Bounce top pulsating-block"></div>
  </div>
</body>
</html>
0 голосов
/ 29 января 2010

1001 * попробовать * 

 function pulsate() {
      $("#pulsating-block").animate({opacity: 0.2}, 3000,function(){
          $(this).animate({opacity: 1}, 3000, null, function() {pulsate()});
      });
     }
...