ホームページ > 記事 > ウェブフロントエンド > アニメーション効果とコールバック関数を実装する方法
アニメーション効果とコールバック関数を実装する方法
- 亚连オリジナル
- 2018-06-15 11:37:152490ブラウズ
ここで、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と組み合わせられます。最後に、プロンプト情報を元の位置に戻すコールバック関数を設定するだけです。
上記は私があなたのためにまとめたものです。
関連記事:
Nodejsを使用してmysqlに接続し、基本的な操作を実装する
以上がアニメーション効果とコールバック関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。