suchen

Heim >Web-Frontend >js-Tutorial >Einfaches Beispiel für das Ein- und Ausblenden von jquery effect_jquery

Einfaches Beispiel für das Ein- und Ausblenden von jquery effect_jquery

WBOY
WBOYOriginal
2016-05-16 15:19:511521Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie der JQuery-Ein- und Ausblendeffekt implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Früher gab es einige Missverständnisse, weil man dachte, dass das Ein- und Ausblenden das Löschen des Elements bedeute, aber in Wirklichkeit wird das Element nur ausgeblendet und angezeigt.

Der spezifische Code lautet wie folgt: 

<!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>

Leser, die an weiteren Inhalten zu jQuery-Spezialeffekten interessiert sind, können sich das Spezialthema dieser Website ansehen: „Zusammenfassung gängiger klassischer Spezialeffekte in jQuery“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Besprechen Sie, ob es einen Zusammenhang zwischen der Speicherung der JavaScript-Tag-Position und seinen function_javascript-Fähigkeiten gibtNächster Artikel：Besprechen Sie, ob es einen Zusammenhang zwischen der Speicherung der JavaScript-Tag-Position und seinen function_javascript-Fähigkeiten gibt

In Verbindung stehende Artikel

Mehr sehen