con - jQuery Looping Animation se pausa cada vez. ¿Cómo evitar pausas?
jquery slidetoggle and fade in (2)
tratar
function pulsate() {
$("#pulsating-block").animate({opacity: 0.2}, 3000,function(){
$(this).animate({opacity: 1}, 3000, null, function() {pulsate()});
});
}
Estoy intentando hacer que un bloque "vibre" entre el 100% de opacidad y una opacidad parcialmente transparente. Quiero hacer esto con la funcionalidad que está integrada en el núcleo de jQuery, si es posible. Preferiría no agregar un complemento para obtener este efecto. Aquí está el código que intento usar:
$(document).ready(function() {
function pulsate() {
$("#pulsating-block").animate({opacity: 0.2}, 3000).animate({opacity: 1}, 3000, null, function() {pulsate()});
}
pulsate(); });
El problema es que cada vez que se completa la animación, se detiene durante aproximadamente un segundo antes de volver a enlazar. ¿Cómo puedo evitar que se detenga para que tenga un efecto "pulsante" suave? (Nota: la animación está exagerada en este ejemplo para resaltar el problema que estoy teniendo)
Tal vez su problema es con la función de oscilación "swing" que jQuery usa de manera predeterminada.
Es posible que desee probar la función de relajación "lineal" en su lugar:
$(document).ready(function() {
function pulsate() {
$("#pulsating-block").
animate({opacity: 0.2}, 3000, ''linear'').
animate({opacity: 1}, 3000, ''linear'', pulsate);
}
pulsate();
});
También he codificado un pequeño complemento de pulsación que incluye una función de "rebote" de relajación que puede ser más de su agrado. Debo señalar que el complemento usa un cálculo continuo para realizar la animación, no dos animaciones separadas de fundido de entrada / salida, por lo que podría ayudar con el problema de "pausa". (Para ser sincero, todavía no veo la pausa de la que estás hablando).
Demo de trabajo
http://jsbin.com/isicu (editable a través de http://jsbin.com/isicu/edit )
Fuente completa
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>