Bagaimana untuk Menghidupkan Box-Shadow dengan Animasi jQuery dan CSS?

Cara Menghidupkan Box-Shadow dengan jQuery

Untuk menghidupkan sifat kotak-bayang dengan jQuery, anda boleh gunakan kaedah .animate() yang disediakan oleh pemalam jQuery untuk animasi bayang-bayang, yang memanjangkan kaedah .animate.

Jawapan Langsung

Sintaks yang betul adalah seperti berikut:

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

Kod ini akan menghidupkan setiap aspek bayang kotak: warna, x- dan y-offset, kabur -jejari dan jejari sebaran.

Sebaliknya menggunakan Animasi CSS

Anda boleh memilih untuk menggunakan animasi CSS dan bukannya mengendalikan animasi secara langsung dengan jQuery. Ini boleh membantu mengelakkan kejutan dengan kekhususan dan menyimpan maklumat gaya anda dalam helaian gaya anda.

Berikut ialah contoh animasi CSS yang boleh anda tentukan dalam helaian gaya anda:

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

Anda kemudian boleh menggunakan acara akhir animasi untuk menyegerakkan penghujung animasi dengan kod JS anda.

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>

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Box-Shadow dengan Animasi jQuery dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!