icon
icon

JavaScriptでフェードインをする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでフェードインをする方法について解説しています。jQueryのfadeInメソッドを使うとフェードインのアニメーションを実装することができます。書き方と画面上での見え方をサンプルコードで確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptでフェードインをする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

フェードインをする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

jQueryのfadeInメソッドとは

jQueryのfadeInメソッドとは、手軽にフェードインのアニメーションを付けることができるメソッドです。

アニメーションはHTMLで表現され、時間の指定がなければアニメーションを表示しきるまで0.4秒の時間が掛ります。

フェードインは、徐々に画面に浮かび上がってくるようなアニメーションを指すものです。

fadeInメソッドは非常に多くのプロパティを含むことに加えて、jQueryを使って、アニメーションを任意の要素に付けることが可能です。

 

fadeIn()メソッドの使い方

fadeIn()メソッドの使い方は、その他のjQueryのメソッドと変わりません。

$()で要素を取得してfadeInメソッドを呼び出すことで使用可能です。

 

では、実際にコードを書いて確かめてみましょう。

まずは、下記のようなHTMLを用意します。

<div>Hello!!</div>

<style>

  div {

    margin-top: 0.5rem;

    padding: 1rem;

    background-color: #E3E6E9;

    border: 1px dotted #000;

  }

</style>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

 

次に、jQueryのfadeInメソッドを呼び出すコードを記述しましょう。

<script>

  $('div').fadeIn()

</script>

 

[PR] フロントエンドで副業する学習方法を動画で公開中

JavaScriptでフェードインをする方法

JavaScriptでフェードインする方法を見ていきます。

まずは、document.querySelectorなどで要素を取得してanimateメソッドを呼び出します。

例えば、なるべく簡素に記述した場合、このようなコードになるでしょう。

<script>

  const div = document.querySelector('div')

  div.animate([{opacity: '0'}, {opacity: '1'}], 1500)

</script>

 

時間を指定してfadeIn()メソッドを使う方法

時間を指定してfadeIn()メソッドを使う方法は、時間を引数に指定することです。

0.5秒なら500、1秒なら1000と指定します。

例えば、1.5秒を指定する場合は下記のようなコードになります。

<script>

  $('div').fadeIn(1500)

</script>

 

執筆してくれたメンター

メンター久保田

Webシステム開発が中心のシステムエンジニア。

HTML、CSS、JavaScript(React、Vue.js)、PHP、Javaが守備範囲。

最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

JavaScriptでフェードインをする方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。