Rumah > Artikel > hujung hadapan web > Bagaimana untuk menghidupkan elemen perenggan dengan jQuery

Bagaimana untuk menghidupkan elemen perenggan dengan jQuery

藏色散人asal: 2021-08-27 11:40:431684semak imbas

Dalam artikel sebelumnya "Cara menambah acara klik dan klik dua kali pada elemen melalui jQuery", saya memperkenalkan anda kepada kaedah menambah acara klik dan klik dua kali pada elemen menggunakan jQuery. Rakan-rakan yang memerlukannya boleh belajar Ketahui~

Kandungan utama artikel ini adalah untuk memperkenalkan cara menggunakan jQuery untuk menghidupkan elemen perenggan.

Jadi dalam artikel ini, kami akan menggunakan jQuery untuk menghidupkan elemen perenggan dengan mengklik butang, dan terutamanya menggunakan kaedah animate() untuk mencapai kesan animasi. Kaedah animate() digunakan untuk menukar keadaan elemen dengan gaya CSS. Kaedah ini juga boleh digunakan untuk menukar sifat CSS untuk menghidupkan elemen yang dipilih.

Jom terus ke kod:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#GFG").animate({
                    opacity: 0.5,
                    fontSize: "3em",
                }, 1000);
            });
        });
    </script>
</head>

<body style="text-align: center;">
<h1 style="color: #ff311f;">
    PHP中文网
</h1>

<h3>
    如何用jQuery为段落元素设置动画？
</h3>

<p id="GFG">
    PHP中文网是你最佳的学习平台！
</p>

<button>点击这里！</button>
</body>
</html>

Kesannya seperti berikut:

GIF 2021-8-27 星期五上午 11-33-41.gif

Ini perkara yang semua orang perlu kuasai Ia ialah kaedah animate(): Kaedah

animate() melaksanakan animasi tersuai set sifat CSS. Kaedah ini menukar elemen dari satu keadaan ke keadaan lain menggunakan gaya CSS. Nilai sifat CSS berubah secara beransur-ansur, membolehkan anda mencipta kesan animasi. Hanya nilai angka boleh dianimasikan (cth. "margin:30px"). Nilai rentetan tidak boleh dianimasikan (seperti "warna latar:merah").

→Nota: Sila gunakan "=" atau "-=" untuk mencipta animasi relatif. Sintaks

animate() adalah seperti berikut:

(selector).animate({styles},speed,easing,callback)

Gaya parameter diperlukan: menentukan satu atau lebih sifat/nilai CSS yang menghasilkan kesan animasi.

Nota: Apabila digunakan dengan kaedah animate(), nama sifat ini mestilah camelCase: anda mesti menggunakan paddingLeft dan bukannya padding-left, marginRight bukannya margin-right dan sebagainya.

Parameter kelajuan adalah pilihan: menentukan kelajuan animasi.

Nilai yang mungkin:

milisaat
"perlahan"
The "fast"

pelonggaran parameter adalah pilihan: menentukan kelajuan elemen pada titik berbeza dalam animasi. Nilai lalai ialah "swing".

Nilai yang mungkin:

"hayun" - bergerak lebih perlahan pada permulaan/akhir, lebih pantas di tengah
" linear" - bergerak pada kelajuan tetap

Petua: Lebih banyak fungsi pelonggaran tersedia disediakan dalam pemalam sambungan.

Parameter panggil balik adalah pilihan: fungsi yang akan dilaksanakan selepas fungsi animasi dilaksanakan.

Akhir sekali, saya ingin mengesyorkan "Tutorial Asas JavaScript" dan "Tutorial Video jquery"~ Selamat datang semua untuk belajar~

Atas ialah kandungan terperinci Bagaimana untuk menghidupkan elemen perenggan dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menambah acara klik dan klik dua kali pada elemen melalui jQueryArtikel seterusnya：Bagaimana untuk menambah acara klik dan klik dua kali pada elemen melalui jQuery

Artikel berkaitan

Lihat lagi