Kesan jQuery - Pudar

Kaedah Pudar jQuery

Dengan jQuery, anda boleh mencapai kesan elemen pudar.

jQuery mempunyai empat kaedah fade berikut:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

kaedah fadeIn()

jQuery fadeIn() digunakan untuk pudar dalam elemen tersembunyi.

Sintaks:

$(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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(4000);
  });
});
</script>
</head>
<body>
<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>

kaedah fadeOut()

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

Sintaks:

$(selector).fadeOut(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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(5000);
  });
});
</script>
</head>
<body>
<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>

kaedah fadeOut()

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

Sintaks:

$(selector).fadeOut(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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(4000);
  });
});
</script>
</head>
<body>
<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>

kaedah fadeToggle()

kaedah jQuery fadeToggle() boleh bertukar antara kaedah fadeIn() dan fadeOut().

fadeToggle() menambah kesan fade-in pada elemen jika ia sudah pudar.

fadeToggle() menambah kesan fade out pada elemen jika ia sudah pudar masuk.

Sintaks:

$(selector).fadeToggle(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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    $("#div1").fadeToggle(1000);
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(4000);
    });
});
</script>
</head>
<body>
<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>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> .big{ font-size:30px; color:#FF0000;} </style> </head> <body> <script> function fadeIn(){ $("#popup").fadeIn(2000); $("#popup").css("position","absolute"); $("#popup").css("left","100px"); $("#popup").css("top","100px"); } function fadeOut(){ $("#popup").fadeOut(2000); } function fadeTo(){ $("#popup").fadeTo(2000,0.5); } </script> <input type="button" value="弹出层" onclick="fadeIn()" > <div id="popup" style="width:200px;height:200px;border:1px red solid;display:none;background-color:red;"> 弹出层的试验 <br> <input type="button" value="取消" onclick="fadeOut()" > <input type="button" value="半透明" onclick="fadeTo()" > </div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Kesan jQuery - Pudar

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]