Richtiger Weg, um Box-Shadow mit jQuery zu animieren

75

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

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

— chchrist
quelle

78

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...
});

— iono
quelle

1

Ich stimme zu, die akzeptierte Antwort wurde kürzlich nicht aktualisiert. Dieses Plugin hat bei mir gut funktioniert.

— Barro32

Ich kann nicht scheinen, dass dies ohne Fehler mit jQuery 1.9 funktioniert. Ist dies jemand anderem begegnet?

— Skami

Da es erst herauskam, was, vor einer Woche (?), Hat er es wahrscheinlich noch nicht aktualisiert. Lesen Sie das Upgrade-Handbuch für jQ1.9 und die Quelle des Schattenanimations-Plugins durch und sehen Sie, welche Methoden überarbeitet werden müssen, wenn dies dringend erforderlich ist.

— Ioon

Ich habe das von Ihnen verlinkte Archiv anstelle der neuesten Version seines Plugins verwendet und es hat einwandfrei funktioniert. Das hat mein Problem gelöst, danke für die schnelle Antwort.

— Skami

1

Ich habe gestern sowohl die nicht minimierte als auch die minimierte Version ausprobiert und beide haben mir den gleichen Fehler gegeben. Ich bin nur froh, dass es jetzt funktioniert. Ich hoffe nur, dass ich nicht auf eines der Probleme stoße, die in 1.8 gelöst wurden. Ich hoffe auch, dass Edwin dieses Plugin weiterentwickeln wird, da es die Version mit dem geringsten Aufwand zu sein scheint.

— Skami

30

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/

— PetersenDidIt
quelle

Sind cssHooks Teil von 1.4.3 oder ein Plugin? Ich würde gerne einen Link zu einer jQuery-Dokumentation haben, wenn Sie eine haben. Das klingt interessant.

— Surreale Träume

@ Surreal Teil von 1.4.3. cssHooks wurde noch nicht viel dokumentiert, aber Sie können in die Sorce eintauchen und es sich ansehen: github.com/jquery/jquery/blob/master/src/css.js Brandon Arron hat viel mit cssHooks gespielt: github.com/brandonaaron/jquery-cssHooks

— PetersenDidIt

@Blowsie ist wahrscheinlich ein Problem mit dem Boxshadow cssHook. Vielleicht dasselbe wie dieses Problem: github.com/brandonaaron/jquery-cssHooks/issues/32

— PetersenDidIt

Dies scheint keine eingebauten Box-Schatten zu unterstützen, oder irre ich mich?

— Adam Fraser

@ AdamFraser funktioniert für mich (in Chrome getestet) jsfiddle.net/petersendidit/w5aAn/474

— PetersenDidIt

15

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 .

— ShaneSauce
quelle

Schön, in der Tat. Irgendwie brennt dieser nicht den größten Teil meines Prozessors, auf dem die Animation ausgeführt wird. Ich denke, aber ich bin mir nicht sicher, ob es daran lag, dass ich 2 Prozentbereiche für die Keyframes verwendet habe (0%, 50% und 100%).

— jozi

3

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' );
});

— Laurent Belloeil
quelle

0

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).

— Drazion
quelle