ホームページ > 記事 > ウェブフロントエンド > jQueryのフェードインおよびフェードアウトアニメーション効果の実装
フェードインとフェードアウト
hide() 関数と show() 関数のアニメーションはサイズを常に変更します。実際、このアプローチは非常に混乱を招くため、現時点での最良の方法は、フェードイン効果とフェードアウト効果を実行することです。
フェードイン操作: fadeIn(time, function(){})
フェードアウト操作: fadeOut (event, function(){})
独自のフェードアウト操作を設定します fadeTo(event, fade-out rate, function(){})。フェードアウト レートは 1
を超えませんフェードアウト操作
<html> <head> <meta charset="utf-8"/> <title>jQuery的动画函数</title> <script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script> <link rel="style/sheet" type="text/css" href="css/style.css"/> <script type="text/javascript"> $(function(){ //设置层淡出操作 $(myimg).fadeOut(5000,function(){ $(this).fadeIn(5000) }); }); </script> </head> <body> <div id="myDiv"> <img src="images/gd.jpg" id="myimg" style="max-width:90%"/ alt="jQueryのフェードインおよびフェードアウトアニメーション効果の実装" > </div> </body> </html>
fadeTo()を使用してフェードアウト率を観察する質問
$(function(){ //设置淡出率 $(myimg).fadeTo(5000,0.3,function(){}); });
0に設定すると完了を意味しますフェードアウト。1 に設定すると、単一のフェードアウトがないことを意味します。
フェードインとフェードアウトの操作をすでに理解している場合は、ボタンの列を実装できます
フェードインとフェードアウトを使用してメニューの機能を実現します
<html> <head> <meta charset="utf-8"/> <title>jQuery的动画函数</title> <script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script> <link rel="style/sheet" type="text/css" href="css/style.css"/> <script type="text/javascript"> $(function(){ //设置淡出率 $("img").each(function(){ $(this).on("mouseover",function(){ $(this).fadeOut(200,function(){ $(this).fadeIn(200); }); }); }); }); </script> </head> <body> <div id="myDiv"> <img src="images/gd.jpg" style="max-width:90%"/ alt="jQueryのフェードインおよびフェードアウトアニメーション効果の実装" > <img src="images/gd.jpg" style="max-width:90%"/ alt="jQueryのフェードインおよびフェードアウトアニメーション効果の実装" > <img src="images/gd.jpg" style="max-width:90%"/ alt="jQueryのフェードインおよびフェードアウトアニメーション効果の実装" > <img src="images/gd.jpg" style="max-width:90%"/ alt="jQueryのフェードインおよびフェードアウトアニメーション効果の実装" > <img src="images/gd.jpg" style="max-width:90%"/ alt="jQueryのフェードインおよびフェードアウトアニメーション効果の実装" > </div> </body> </html>
上記の 3 つの関数グループによって形成される関数。
上記は、jQuery のフェードインおよびフェードアウト アニメーション効果の実装についての完全な紹介です。その他の jQuery ビデオ チュートリアル に注目してください。 PHP中国語ウェブサイト。
以上がjQueryのフェードインおよびフェードアウトアニメーション効果の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。