cari

Rumah >hujung hadapan web >tutorial js >Contoh mudah jquery fade in dan fade out effect_jquery

Contoh mudah jquery fade in dan fade out effect_jquery

WBOY
WBOYasal
2016-05-16 15:19:511522semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan kesan fade-in dan fade-out jquery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Terdapat beberapa salah faham sebelum ini, menyangka bahawa memudar masuk dan keluar bermakna memadamkan elemen, tetapi sebenarnya ia hanya menyembunyikan dan memaparkan elemen.

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
  <mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script>
  <title>Example | xHTML1.0</title>
</head>
<body>
<button id="click">click</button>
<ul id="ul">
<li>#</li>
<li>@</li>
<li>$</li>
</ul>
<mce:script type="text/javascript"><!--
$(function () {
  var _num = 1;
  $("#click").click(function () {
    var _ul = $("#ul");
    var _li = $("#ul li");
    var _len = _li.length;
    var _str = "<li style="display:none" mce_style="display:none">" + _num + "</li>";
    _li.eq(_len-1).fadeOut('slow',function () {
      $(this).remove();
    });
    ++_num;
    $(_str).prependTo(_ul).fadeIn('slow');
  });
});
// --></mce:script>
</body>
</html>

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas tapak ini: "Ringkasan kesan khas klasik biasa dalam jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

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：Bincangkan sama ada terdapat sebarang hubungan antara penyimpanan kedudukan teg JavaScript dan kemahiran function_javascriptnyaArtikel seterusnya：Bincangkan sama ada terdapat sebarang hubungan antara penyimpanan kedudukan teg JavaScript dan kemahiran function_javascriptnya

Artikel berkaitan

Lihat lagi