jquery - example - css pulse animation generator

Forma correcta de animar la sombra de caja con jQuery

Question

¿Cuál es la sintaxis correcta para animar la propiedad box-shadow con jQuery?

$().animate({?:"0 0 5px #666"});

Answer 1

Respuesta directa

Utilizando el plugin jQuery de Edwin Martin para animación de sombras , que amplía el método .animate , puedes simplemente usar la sintaxis normal con "boxShadow" y cada faceta de eso - color , el desplazamiento xey , el radio de desenfoque y la dispersión radio - se anima. Incluye soporte de sombra múltiple.

$(element).animate({ 
  boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
}); 

Usando CSS animaciones en su lugar

jQuery se anima cambiando la propiedad de style de los elementos DOM, lo que puede causar sorpresas con la especificidad y mover la información del estilo fuera de las hojas de estilo.

No puedo encontrar las estadísticas de compatibilidad del navegador para CSS shadow animation, pero puede considerar el uso de jQuery para aplicar una clase basada en animación en lugar de manejar la animación directamente. Por ejemplo, puede definir una animación de cuadro sombreado en su hoja de estilo:

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

A continuación, puede utilizar la propiedad animationend nativa para sincronizar el final de la animación con lo que estaba haciendo en su código JS:

$(element).addClass(''shadow-pulse'');
$(element).on(''animationend'', function(){    
    $(element).removeClass(''shadow-pulse'');
    // do something else...
});

Answer 2

¡Me encanta la solución de ShaneSauce! Utilice un intead clase de una ID y puede agregar / eliminar el efecto a cualquier elemento usando jQuery addClass / delay / removeClass:

$(''.error'').each( function(idx, el){
    $( el )
        .addClass( ''highlight'' )
        .delay( 2000 )
        .removeClass( ''highlight'' );
});

Answer 3

Aquí hay un ejemplo de cómo hacerlo sin un complemento: jQuery cuadro animado Pero no tiene la funcionalidad adicional que viene con el uso de un complemento, pero personalmente me gusta ver (y entender) el método detrás de la locura.

Answer 4

Si está utilizando jQuery 1.4.3+, puede aprovechar el código cssHooks que se agregó.

Al usar el enganche boxShadow: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

Puedes hacer algo como esto:

$(''#box'').animate({
    ''boxShadowX'': ''10px'',
    ''boxShadowY'':''10px'',
    ''boxShadowBlur'': ''20px''
});

El gancho no te permite animar el color todavía, pero estoy seguro de que se puede agregar algún trabajo.

Ejemplo: http://jsfiddle.net/petersendidit/w5aAn/

Answer 5

Si no desea usar un complemento, puede hacerlo con un poco de CSS:

#my-div{    
  background-color: gray;
  animation: shadowThrob 0.9s infinite;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.9s ease-out infinite;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
/*NOTE: The animation property is not supported in Internet Explorer 9 and earlier versions.*/

Échale un vistazo: http://jsfiddle.net/Z8E5U/

Si desea documentación completa sobre animaciones CSS, su camino a la magia comienza aquí.