Bagaimana untuk membuat gambar secara beransur-ansur hilang dengan jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk membuat gambar secara beransur-ansur hilang dengan jquery

青灯夜游

Lepaskan： 2022-04-21 14:50:02

asal

2535 orang telah melayarinya

Cara untuk hilang secara beransur-ansur: 1. Gunakan fadeOut(), cuma tetapkan bilangan milisaat daripada kelihatan kepada hilang, sintaksnya ialah "$("img").fadeOut(bilangan milisaat)"; Gunakan fadeTo() boleh menetapkan ketelusan untuk menurun kepada 0 dalam bilangan milisaat yang ditentukan, sintaksnya ialah "$("img").fadeTo(bilangan milisaat, 0)".

Bagaimana untuk membuat gambar secara beransur-ansur hilang dengan jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

jquery membuat gambar secara beransur-ansur hilang

Kaedah 1: Gunakan fadeOut()---buat gambar hilang secara beransur-ansur tanpa mengambil up space

Kaedah fadeOut() menggunakan kesan fade out untuk menyembunyikan elemen yang dipilih

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("img").fadeOut(3000);
                });
            });
        </script>
    </head>
 
    <body>
        <img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy"      style="max-width:90%" / alt="Bagaimana untuk membuat gambar secara beransur-ansur hilang dengan jquery" ><br><br>
        <button>让图片逐渐消失</button>
    </body>
</html>

Salin selepas log masuk

Bagaimana untuk membuat gambar secara beransur-ansur hilang dengan jquery

Kaedah 2: Gunakan fadeTo()- --Imej pemegang tempat secara beransur-ansur hilang

Kaedah fadeTo() secara beransur-ansur menukar kelegapan elemen yang dipilih kepada nilai yang ditentukan.

Hanya turunkan ketelusan akhir kepada 0.

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("img").fadeTo(3000,0);
                });
            });
        </script>
    </head>
 
    <body>
        <img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy"      style="max-width:90%" / alt="Bagaimana untuk membuat gambar secara beransur-ansur hilang dengan jquery" ><br><br>
        <button>让图片逐渐消失</button>
    </body>
</html>

Salin selepas log masuk

Bagaimana untuk membuat gambar secara beransur-ansur hilang dengan jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk membuat gambar secara beransur-ansur hilang dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!