Richtiger Weg, um Box-Shadow mit jQuery zu animieren

Welches ist die richtige Syntax, um die Box-Shadow- Eigenschaft mit jQuery zu animieren ?

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

Direkte Antwort

Mit dem jQuery-Plugin von Edwin Martin für Schattenanimationen , das die .animateMethode erweitert, können Sie einfach die normale Syntax mit "boxShadow" und jeder Facette davon verwenden - Farbe , x- und y-Offset , Unschärferadius und Ausbreitungsradius - wird animiert. Es enthält Unterstützung für mehrere Schatten.

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

Verwenden Sie stattdessen CSS-Animationen

jQuery wird animiert, indem die styleEigenschaft von DOM-Elementen geändert wird. Dies kann zu Überraschungen führen und Stilinformationen aus Ihren Stylesheets entfernen.

Ich kann keine Browser-Unterstützungsstatistiken für CSS-Schattenanimationen finden, aber Sie können jQuery verwenden, um eine animationsbasierte Klasse anzuwenden, anstatt die Animation direkt zu verarbeiten. Sie können beispielsweise eine Box-Shadow-Animation in Ihrem Stylesheet definieren:

@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;
}

Sie können dann das native animationendEreignis verwenden, um das Ende der Animation mit dem zu synchronisieren, was Sie in Ihrem JS-Code getan haben:

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

Wenn Sie jQuery 1.4.3+ verwenden, können Sie den hinzugefügten cssHooks-Code nutzen.

Mithilfe des boxShadow-Hooks: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

Sie können so etwas tun:

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

Mit dem Haken können Sie die Farbe noch nicht animieren, aber ich bin mir sicher, dass einige Arbeiten hinzugefügt werden könnten.

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

Wenn Sie kein Plugin verwenden möchten, können Sie dies mit etwas CSS tun:

#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.*/

Probieren Sie es aus: http://jsfiddle.net/Z8E5U/

Wenn Sie eine vollständige Dokumentation zu CSS-Animationen wünschen, beginnt hier Ihr Weg zur Zauberei .

Ich liebe die ShaneSauce-Lösung! Verwenden Sie eine Klasse anstelle einer ID, und Sie können den Effekt mit jQuery addClass / delay / removeClass zu jedem Element hinzufügen / entfernen:

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

Hier ist ein Beispiel, wie man es ohne Plugin macht: jQuery animierte Box Aber es hat nicht die zusätzliche Funktionalität, die mit der Verwendung eines Plugins einhergeht, aber ich persönlich mag es, die Methode hinter dem Wahnsinn zu sehen (und zu verstehen).