паузы Анимации Цикличного выполнения jQuery каждый раз. Как удержаться от приостановки?
Я пытаюсь заставить блок "пульсировать" между 100%-й непрозрачностью и некоторой частично прозрачной непрозрачностью. Я хочу сделать это с функциональностью, которая встроена в ядро jQuery, если это возможно. Я не добавил бы плагин для получения этого эффекта. Вот код, который я пытаюсь использовать:
$(document).ready(function() {
function pulsate() {
$("#pulsating-block").animate({opacity: 0.2}, 3000).animate({opacity: 1}, 3000, null, function() {pulsate()});
}
pulsate(); });
Проблема состоит в том, что каждый раз анимация завершается, она приостанавливается приблизительно в течение секунды перед цикличным выполнением снова. Как я могу помешать ему приостанавливаться так, чтобы я получил гладкий "пульсирующий" эффект? (Отметьте: анимация преувеличена в этом примере для выделения проблемы, которую я имею),
2 ответа
Возможно, ваша проблема в том, что функция "swing" по умолчанию использует функцию jQuery, облегчающую работу.
Вместо этого Вы можете попробовать "линейную" функцию смягчения :
$(document).ready(function() {
function pulsate() {
$("#pulsating-block").
animate({opacity: 0.2}, 3000, 'linear').
animate({opacity: 1}, 3000, 'linear', pulsate);
}
pulsate();
});
Я также закодировал небольшой импульсный плагин, который включает функцию смягчения "отскакивания" , которая может больше понравиться Вам. Я должен заметить, что плагин использует непрерывное вычисление для выполнения анимации, а не две отдельные анимации fade-in/fade-out, так что это может помочь с проблемой "паузы". (Честно говоря, я до сих пор не вижу паузы, о которой вы говорите.)
Work Demo
http://jsbin.com/isicu (редактируемый через http://jsbin.com/isicu/edit)
Full Source
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>
Попробуйте
function pulsate() {
$("#pulsating-block").animate({opacity: 0.2}, 3000,function(){
$(this).animate({opacity: 1}, 3000, null, function() {pulsate()});
});
}