簡単なアニメーション操作

日常のプログラミングでは、多くのアニメーション効果設定が使用されます。現時点では、多くの方法を使用して完了できます。たとえば、ソースjs、jQuery、またはプラグインを完了できます。コードを自分で作成する場合は、ソースjsを使用できます。ときどき煩わしく感じることもありますが、jQueryの使用は非常に簡単です。簡単なjQueryアニメーション設定を次に示します。

1.非表示および表示

非
表示：.hide（）表示：.show（）
表示/非表示：.toggle （）

1.1、隠す

$("#btn").on('click',function(){
    $("#box").hide()
})

ここに画像の説明を挿入

1.2、ディスプレイ

$("#btn").on('click',function(){
    $("#box").show()
})

ここに画像の説明を挿入

1.3、非表示/表示

$("#btn").on('click',function(){
    $("#box").toggle()
})

ここに画像の説明を挿入

2.引き上げて引き下げる

プルアップ：.slideUp（）
プルダウン：.slideDown（）
プルアップ/ドロップダウン：.slideToggle（）

2.1、引き上げ

$("#btn").on('click',function(){
    $("#box").slideUp()
})

ここに画像の説明を挿入

2.2、ドロップダウン

$("#btn").on('click',function(){
    $("#box").slideDown()
})

ここに画像の説明を挿入

2.3、プルアップ/ダウン
$("#btn").on('click',function(){
    $("#box").slideToggle()
})

3.フェードインおよびフェードアウト

フェードイン：.fadeIn（アニメーション時間）
フェードアウト：.fadeOut（アニメーション時間）
フェードイン/フェードアウト：.fadeToggle（アニメーション時間）

3.1、フェードイン

$("#btn").on('click',function(){
    $("#box").fadeIn(1000)
})

ここに画像の説明を挿入

3.2、フェードアウト

$("#btn").on('click',function(){
    $("#box").fadeOut(1000)
})

ここに画像の説明を挿入

3.3、フェードイン/フェードアウト
$("#btn").on('click',function(){
    $("#box").fadeToggle(1000)
})

透明度を指定する

.fadeTo（時間[ミリ秒]、透明度）

$("#btn").on('click',function(){
    $("#box").fadeTo(1000,.5)
})

ここに画像の説明を挿入

カスタムアニメーション

.animate（{attribute：target}、function（）{execute after the target is completed}）
タイマーのクリア：.stop（）[ タイマーはアニメーションごとに一度クリアする必要があります ]
stopには2つのパラメーターがあり、デフォルトではfalseです

アニメーションキュー（最初のパラメーター）：
false：操作なし
true：空
現在のアニメーション（2番目のパラメーター）：
false：すぐに停止
true：すぐに終了

例：ブラインド
<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#box {
				border: 1px solid red;
				width: 602px;
				height: 202px;
				overflow: hidden;
			}

			.sbox {
				height: 200px;
				width: 150px;
				float: left;
			}
</style>

<body>
	<div id="box">
		<div class="sbox" style="background: yellow;"></div>
		<div class="sbox" style="background: blue;"></div>
		<div class="sbox" style="background: orange;"></div>
		<div class="sbox" style="background: pink;"></div>
	</div>
</body>

<script type="text/javascript">
	$(".sbox").hover(function() {
		$(this).stop().animate({
			width: 300
		}).siblings().stop().animate({
			width: 100
		});
	},function(){
		$(".sbox").stop().animate({width:150})
	})
</script>
タイマーをクリアするためにstop（）を追加しない場合、マウスが2回以上動くと、アニメーションがトリガーされた回数が記録され、それらが順番に実行されるため、マウスが離れると、現在のアクションが終了してもアニメーションは終了しません。実行が継続すると、次の結果が発生します。