Bagaimana untuk Menghidupkan Box-Shadow dengan jQuery?

Cara Menghidupkan Box-Shadow dengan jQuery

Soalan:

Bagaimana kita boleh menggunakan jQuery untuk menghidupkan sifat kotak-bayang?

Jawapan:

Pilihan 1: Menggunakan Pemalam Animasi Bayangan jQuery

Dengan Pemalam jQuery Edwin Martin untuk animasi bayang-bayang, anda boleh melanjutkan kaedah .animate dan dengan mudah menghidupkan setiap aspek sifat kotak-bayang:

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

Pilihan 2: Menggunakan Animasi CSS Sebaliknya

Pertimbangkan untuk menggunakan animasi CSS untuk mentakrifkan animasi bayang-kotak:

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

Kemudian, tambahkan kelas '.shadow-pulse' pada elemen anda menggunakan JavaScript dan dengar acara 'animationend' untuk mengendalikan tindakan selepas animasi siap. Pendekatan ini memastikan maklumat gaya anda teratur dalam helaian gaya dan sejajar dengan keupayaan penyemak imbas.

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