ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryのフェードインおよびフェードアウトアニメーション効果の実装

jQueryのフェードインおよびフェードアウトアニメーション効果の実装

云罗郡主
云罗郡主転載
2019-01-21 10:10:022734ブラウズ

フェードインとフェードアウト

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(){});
});

jQueryのフェードインおよびフェードアウトアニメーション効果の実装

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>

jQueryのフェードインおよびフェードアウトアニメーション効果の実装

上記の 3 つの関数グループによって形成される関数。

上記は、jQuery のフェードインおよびフェードアウト アニメーション効果の実装についての完全な紹介です。その他の jQuery ビデオ チュートリアル に注目してください。 PHP中国語ウェブサイト。


以上がjQueryのフェードインおよびフェードアウトアニメーション効果の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。