今回は fadeIn(), fadeOut() を使ってみましょう。
フェードインとはゆっくり表示させること、フェードアウトとはゆっくり消えていくことを指します。これらはよくWEBサイトで使われている機能ですね。
※エディターは編集可能です。いろいろいじって動きを確かめてください。
コンテンツ
【fadeIn()】指定した要素をフェードインさせる
See the Pen
fadeIn() by taichi (@taichi_na)
on CodePen.
上の例ではシンプルに、ボタンを押すと隠れていた<p>要素がフェードインをするというスクリプトを書いています。
書かれている要素を隠すには、CSSで display:none; でしたね。
引数に数字を入れるとフェードインのスピードを変えることができます。
$(“p”).fadeIn(ココ); 単位はミリ秒なので、1000で1秒になります。
試しに何か数字をいれてみて動かしてみてください。
引数を入れていない状態だと、400ミリ秒程度みたいです。0.5秒くらいということですね。
関数を指定しフェードイン後の動作を命令
See the Pen
fadeOut() by taichi (@taichi_na)
on CodePen.
先ほどは引数の部分に数字を入れて、フェードインのスピードを調整してみました。
今度は引数に関数を指定することによって、フェードインが終了したときに行う動作を命令してみました。
クリックのファンクションの中にフェードインのファンクションが入っているので複雑に見えるかもしれませんが、一つずつ確認していけば簡単です。
ちなみに、上の例のように、数字を指定し（フェードインのスピード）その後に関数で、フェードイン後の処理を命令することも可能です。
【fadeOut()】指定した要素をフェードアウトさせる
See the Pen
fadeOut() by taichi (@taichi_na)
on CodePen.
こちらは fadeIn() と全く同じ使い方で難しいことはありません。
指定をしたセレクタが、時間をかけて消えていきます。
消えるまでの時間と、消えた後の処理も同じように設定が可能です。
ここではフェードアウトが済んだのちに、消えました！という文字を表示させています。
