ホームページ > 記事 > ウェブフロントエンド > jquery のフェードインとフェードアウトの簡単な例
jquery のフェードインとフェードアウトの簡単な例
- WBOYオリジナル
- 2016-05-16 15:19:511415ブラウズ
この記事の例では、jquery のフェードインおよびフェードアウト効果を実装する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
以前は、フェードインとフェードアウトが要素の削除を意味すると誤解されていましたが、実際には要素が非表示になったり表示されたりするだけです。
具体的なコードは次のとおりです:
<!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>
jQuery 特殊効果に関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「jQuery における一般的な古典的な特殊効果の概要」
をチェックしてください。この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。