アニメーション効果とコールバック関数を実装する方法-jsチュートリアル-php.cn

アニメーション効果とコールバック関数を実装する方法

亚连

リリース： 2018-06-15 11:37:15

オリジナル

2544 人が閲覧しました

ここで、CSS3 を jQuery と組み合わせてアニメーション効果とコールバック関数を実現する例を共有します。これは非常に参考になるものであり、皆さんの役に立つことを願っています。

最後のプロジェクトでは、友人から提案されたアイデアを書きました。ユーザーがログインに成功したときにユーザーを歓迎する特別な効果、つまり、ウェルカムユーザー情報がページの下からページまで上がっていき、その後ページに戻るというものです。底。

彼が遭遇した問題は次のとおりです: プロンプトメッセージは下から出ることができますが、出た後は下に降りることができません。

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

レンダリング:

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<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>
	</head>
	<body>
		<p>
			<p>欢迎xxx登录，祝您购物愉快</p>
		</p>
		
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});
			
			 	});
			}
		</script>
	</body>
</html>

ログイン後にコピー

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

上記は私があなたのためにまとめたものです。

NodeでES6構文を使用する方法(詳細なチュートリアル)

vue ScaffoldingでSassを設定する方法

Nodejsを使用してmysqlに接続し、基本的な操作を実装する

方法Angular4のHTML属性バインディングで実装

JSを使った九九の書き方

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