Wie animiere ich Box-Shadow mit jQuery- und CSS-Animationen?

So animieren Sie Box-Shadow mit jQuery

Um die Box-Shadow-Eigenschaft mit jQuery zu animieren, können Sie Folgendes tun Verwenden Sie die vom jQuery-Plugin bereitgestellte .animate()-Methode für Schattenanimationen, die die .animate-Methode erweitert.

Direct Answer

Die korrekte Syntax lautet wie folgt:

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

Dieser Code animiert jede Facette des Boxschattens: Farbe, X- und Y-Versatz, Unschärfe -radius und spread-radius.

Stattdessen CSS-Animationen verwenden

Sie können stattdessen CSS-Animationen verwenden Bearbeiten der Animation direkt mit jQuery. Dies kann dazu beitragen, Überraschungen mit Spezifität zu vermeiden und Ihre Stilinformationen in Ihren Stylesheets zu behalten.

Hier ist eine Beispiel-CSS-Animation, die Sie in Ihrem Stylesheet definieren können:

<code class="css">@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;
}</code>

Sie können dann das Animationend-Ereignis verwenden, um das Ende der Animation mit Ihrem JS-Code zu synchronisieren.

Vanilla JS:< ;/h4>

<code class="js">element.classList.add('shadow-pulse')
element.addEventListener('animationend', event => {  
    element.classList.remove('shadow-pulse')
    // do something else...
})</code>

jQuery:

<code class="js">$(element).addClass('shadow-pulse')
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse')
    // do something else...
})</code>

Das obige ist der detaillierte Inhalt vonWie animiere ich Box-Shadow mit jQuery- und CSS-Animationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!