Sembunyikan elemen halaman dengan mudah menggunakan animasi jQuery-tutorial js-php.cn

Sembunyikan elemen halaman dengan mudah menggunakan animasi jQuery

WBOY

Lepaskan： 2024-02-26 20:12:07

asal

365 orang telah melayarinya

Sembunyikan elemen halaman dengan mudah menggunakan animasi jQuery

Gunakan animasi jQuery untuk mengalih keluar elemen halaman dengan mudah

Dalam pembangunan web, kami sering menghadapi situasi di mana elemen halaman perlu ditambah atau dipadamkan secara dinamik. Menggunakan kesan animasi kaya yang disediakan oleh jQuery, anda boleh membuat penambahan dan pemadaman elemen halaman lebih jelas dan menarik. Artikel ini akan menerangkan cara menggunakan animasi jQuery untuk mengalih keluar elemen halaman dengan mudah dan memberikan contoh kod khusus.

Pertama, kita perlu menyediakan halaman HTML yang mudah dan memperkenalkan perpustakaan jQuery ke dalamnya. Seterusnya, kami akan mencetuskan kesan animasi memadam elemen dengan mengklik butang.

Contoh kod HTML adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sembunyikan elemen halaman dengan mudah menggunakan animasi jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 20px;
        text-align: center;
        line-height: 200px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="box">点击我删除</div>
<button id="deleteBtn">删除元素</button>

<script>
    $(document).ready(function() {
        $(".box").click(function() {
            $(this).fadeOut(1000, function() {
                $(this).remove();
            });
        });

        $("#deleteBtn").click(function() {
            $(".box").fadeOut(1000, function() {
                $(this).remove();
            });
        });
    });
</script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mentakrifkan elemen .box interaktif Apabila pengguna mengklik pada elemen tersebut, kesan fade-out akan dicetuskan dan elemen akan dipadamkan. Pada masa yang sama, kami juga telah menyediakan butang, yang akan mencetuskan kesan yang sama apabila diklik. .box 元素，在用户点击该元素时，会触发淡出效果并且删除该元素。同时，我们还准备了一个按钮，点击按钮时也会出发同样的效果。

在JavaScript代码部分，我们使用了 fadeIn() 和 remove()

Dalam bahagian kod JavaScript, kami menggunakan kaedah fadeIn() dan remove() untuk mencapai kesan elemen pudar dan pemadaman. Selepas elemen pudar, elemen dipadamkan melalui fungsi panggil balik.

Melalui contoh kod di atas, kami menunjukkan cara menggunakan animasi jQuery untuk mengalih keluar elemen halaman dengan mudah dan menjadikan pemadaman elemen halaman lebih lancar dan cantik melalui kesan animasi pudar. Saya harap artikel ini akan membantu anda dalam pembangunan web. 🎜

Atas ialah kandungan terperinci Sembunyikan elemen halaman dengan mudah menggunakan animasi jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!