C3+jQuery はアニメーション効果とコールバック関数を作成します

今回は、アニメーションエフェクトとコールバック関数を作成するためのC3+jQueryを紹介します。C3+jQueryでアニメーションエフェクトとコールバック関数を作成するための注意事項

を紹介します。

最後のプロジェクトでは、ユーザーがログイン
に成功すると、ユーザーを歓迎するための特別な効果があり、ページの下からウェルカムユーザー情報が表示されます。そしてまた一番下に戻ります。

彼が遭遇した問題は次のとおりです:

即時情報は下から出てきますが、出た後は下に進むことができません。

それを聞いた後、私はこのバグを解決するためにコールバック関数を使用することを考え、ログインが成功したときにホームページに入る（つまりページを更新する）ことをシミュレートし、ウェルカムメッセージがポップアップ表示され、消えます。これに似たアニメーション効果を書きました。参考のみ:

レンダリング:

コードは次のとおりです:

nbsp;html>

	
		<meta>
		<title>欢迎动画</title>
		<style>
		 	*{margin:0;padding:0;}
		 	p {
		 		margin:0 auto;
		 		width:100%;
		 		height:700px;
		 		overflow:hidden;
		 		position:relative;
		 	}			
		 	p {
				width:220px;
				height:40px;
				line-height:40px;
				text-align:center;
				display:block;color:#900;
				background:#ccc;
				position:absolute;
				bottom:-40px;
				left:500px;
		 	}
		</style>
	
	
		<p>
			</p><p>欢迎xxx登录，祝您购物愉快</p>
				
		<script></script>
		<script>
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});			
			 	});
			}
		</script>
	

ここでは主にcss3のanimateアニメーション属性が使用され、時間と方向を実現するためにjQueryと組み合わせられます。最後に、プロンプト情報を元の位置に戻すコールバック関数を設定するだけです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTML+CSS+jQueryでカルーセル広告画像を実装

JSで位置決めナビゲーションバーを実装

jqueryでページング効果を作成する方法

🎜

以上がC3+jQuery はアニメーション効果とコールバック関数を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。