jQuery fade in dan out fungsi animasi

Fungsi pudar hanya memberikan kesan kecerunan ketelusan.

Fungsi pudar Pudar

名称	说明	举例
fadeIn( speed, [callback] )	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。	用600毫秒缓慢的将段落淡入: `$("p").fadeIn("slow");`
fadeOut( speed, [callback] )	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。	用600毫秒缓慢的将段落淡出: `$("p").fadeOut("slow");`
fadeTo(speed, opacity, [callback])	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。	用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度: `$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);`

Nama<🎜>

<🎜>Perihalan< 🎜>

<🎜>Contoh<🎜>

<🎜>fadeIn( kelajuan, [panggilan balik] )<🎜> <🎜>Pudar dalam semua elemen padanan melalui perubahan kelegapan dan secara pilihan mencetuskan fungsi panggil balik selepas animasi selesai. <🎜><🎜>Animasi ini hanya melaraskan kelegapan elemen, yang bermaksud ketinggian dan lebar semua elemen padanan tidak akan berubah. <🎜> Pudarkan perenggan masuk secara perlahan selama 600 milisaat:
$("p").fadeIn("slow");

< 🎜>fadeOut( kelajuan, [panggilan balik] )<🎜> Pudarkan semua elemen padanan melalui perubahan kelegapan dan secara pilihan mencetuskan fungsi panggil balik selepas animasi selesai. Pudarkan perenggan keluar secara perlahan menggunakan 600 milisaat:
$("p").fadeOut("slow");

< 🎜>fadeTo(kelajuan, kelegapan, [panggilan balik])<🎜> Laraskan kelegapan semua elemen padanan secara beransur-ansur kepada kelegapan yang ditentukan dan secara pilihan mencetuskan fungsi panggil balik selepas animasi selesai. Laraskan ketelusan perenggan secara perlahan kepada 0.66 lebih 600 milisaat, kira-kira 2/3 keterlihatan:
$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);

Penjelasan

Fungsi fadeIn dan fadeOut sepadan dengan menunjukkan dan menyembunyikan, yang digunakan untuk memaparkan dan menyembunyikan objek dengan kesan kecerunan ketelusan:

$("#divPop").fadeIn(200);
$("#divPop").fadeOut("fast");

1. Fade in Fade out

1 kaedah jQuery fadeIn()

jQuery fadeIn() digunakan untuk fade in. unsur tersembunyi.

 语法：$(selector).fadeIn(speed,callback);

Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat. Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.

Contoh berikut menunjukkan kaedah fadeIn() dengan parameter berbeza:

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeIn();  
    $("#div2").fadeIn("slow");  
    $("#div3").fadeIn(3000);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeIn() 方法。</p>  
<button>点击这里，使三个矩形淡入</button>  
<br><br>  
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>  
<br>  
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>  
<br>  
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>  
</body>  
</html>

QQ截图20161026101329.png

2. Kaedah jQuery fadeOut()

Kaedah jQuery fadeOut() digunakan untuk memadamkan elemen yang boleh dilihat.

语法：$(selector).fadeOut(speed,callback);

Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat. Parameter panggilan balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.

Contoh berikut menunjukkan kaedah fadeOut() dengan parameter yang berbeza:

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeOut();  
    $("#div2").fadeOut("slow");  
    $("#div3").fadeOut(3000);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeOut() 方法。</p>  
<button>点击这里，使三个矩形淡出</button>  
<br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>  
<br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>  
<br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>

QQ截图20161026101513.png

kaedah jQuery fadeToggle()

kaedah jQuery fadeToggle() boleh bertukar antara kaedah fadeIn() dan fadeOut(). Jika elemen sudah pudar, fadeToggle() menambah kesan fade-in pada elemen. Jika elemen sudah pudar masuk, fadeToggle() menambah kesan fade out pada elemen.

         语法：$(selector).fadeToggle(speed,callback);

Contoh berikut menunjukkan kaedah fadeToggle() dengan parameter berbeza:

<!DOCTYPE html>  
<html>  
<head>  
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeToggle();  
    $("#div2").fadeToggle("slow");  
    $("#div3").fadeToggle(3000);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeToggle() 方法。</p>  
<button>点击这里，使三个矩形淡入淡出</button>  
<br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>  
<br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>  
<br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</body>  
</html>

4 kaedah jQuery fadeTo()

Kaedah jQuery fadeTo() membenarkan kecerunan diberikan. Kelegapan tertentu (nilai antara 0 dan 1).

 语法：$(selector).fadeTo(speed,opacity,callback);

Parameter kelajuan yang diperlukan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat. Parameter kelegapan yang diperlukan dalam kaedah fadeTo() menetapkan kesan kelegapan kepada kelegapan yang diberikan (nilai antara 0 dan 1). Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan apabila fungsi ini selesai.

Contoh berikut menunjukkan kaedah fadeTo() dengan parameter berbeza:

<!DOCTYPE html>  
<html>  
<head>  
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("#div1").fadeTo("slow",0.15);  
    $("#div2").fadeTo("slow",0.4);  
    $("#div3").fadeTo("slow",0.7);  
  });  
});  
</script>  
</head>  
<body>  
<p>演示带有不同参数的 fadeTo() 方法。</p>  
<button>点击这里，使三个矩形淡出</button>  
<br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>  
<br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>  
<br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>

            //设置弹出层的透明度
               $("#divPop").fadeTo(0, 0.66);                //让弹出层透明显示
               if ($("#divPop").css("display") == "none")
               {
                   $("#divPop").fadeIn(speed);
               }                else
               {
                   $("#divPop").fadeOut(speed);
               }

Selepas menetapkan ketelusan lapisan pop timbul dengan fadeTo, menggunakan fadeIn akan menyebabkan objek dipaparkan dan pudar kepada tetapan fadeTo. Ketelusan.

Apa yang diperkenalkan di sini hanyalah ciri-ciri kedua-dua fungsi dalam aplikasi sebenar, ia tidak semestinya perlu digunakan bersama.

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head> <body> <p>演示带有不同参数的 fadeIn() 方法。</p> <button>点击这里，使三个矩形淡入</button> <br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div> <br> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

jQuery fade in dan out fungsi animasi

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]