ここで、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 サイトの他の関連記事を参照してください。