jquery コールバック関数練習
今回のテーマ:コールバック関数
- コールバックの練習
- Q.そもそもコールバックとは?
- A.何らかの処理が終わった後に何らかの処理をすること。
具体的な方法
まずはコールバック関数無しで。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> </head> <body> <p>jQueryの練習</p> <div id="box" style="width:100px;height:100px;background:blue;"></div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(function() { $('#box').fadeOut(800); }); </script> </body> </html>
単純に四角形が消えるだけ。
この後にアラートを表示したい。そこでコールバック関数が使える。
さあ、やってみよう!!
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> </head> <body> <p>jQueryの練習</p> <div id="box" style="width:100px;height:100px;background:blue;"></div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(function() { $('#box').fadeOut(800, function() { alert("gone!"); }); }); </script> </body> </html>
- 第2引数にfunctionをとる。
- その中で「alert("gone!");」とすると、
この要素が fadeOut で消えたときこの処理を実行してくれる。