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

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

 

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

 

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

 

 

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が守備範囲。 最初に選ぶポケモンは炎タイプ。

 

 

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

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