jQuery Academy · レッスン

jQueryとアニメーション

Q: 「jQueryとアニメーション」で何を学びますか？

jQueryとアニメーション ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

「jQueryとアニメーション」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン1/1です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全1レッスンが含まれています。

概要

こんにちは。

このセクションでは、jQueryによるアニメーションについて学びます。

さっそく始めましょう。

show - hideメソッド

show()とhide()メソッド

showメソッドとhideメソッドを使って、画面上のDOMオブジェクトを表示・非表示にできます。

<h1 id="target">Hello Coddy</h1>	
<button id="show">Show</button>	
<button id="hide">Hide</button>	

<script>
/*
hide method hides target 
element from DOM.
*/
$('#hide').on('click', function(){
   $('#target').hide();
})

/*
show method shows the 
target element in the DOM.
*/
$('#show').on('click', function(){
  $('#target').show();
});

</script>

toggleメソッド

toggle()メソッド

このほかに、名前から動作を推測できるtoggle()メソッドがあります。このメソッドを使うと、要素が非表示なら表示し、表示されていれば非表示にします。

<h1 id="target">Hello Coddy</h1>	
<button id="toggle">Toggle</button>	

<script>
/*
toggle() method shows or hides the 
target element in the DOM.
*/
$('#toggle').on('click', function(){
  $('#target').toggle();
});
</script>

fadeinとfadeout

fadeIn()とfadeOut()メソッド

ここでは、HTML要素の表示と非表示をアニメーションさせるfadeInメソッドとfadeOutメソッドを見てみましょう。

fadeInメソッドとfadeOutメソッドには、ミリ秒単位の数値を任意で指定できます。この値によってアニメーションにかかる時間が決まります。引数を渡さない場合は、デフォルト値が使われます。

<h1 id="target">Hello Coddy</h1>	
<button id="show">Show with Animation</button>	
<button id="hide">Hide with Animation</button>	

<script>
/*
fadeOut method hides target 
element from DOM with Animation
*/
$('#hide').on('click', function(){
   $('#target').fadeOut();
})

/*
fadeIn method shows the 
target element in the DOM with Animation
*/
$('#show').on('click', function(){
  $('#target').fadeIn();
});

</script>

fadeinとfadeout

fadeOutは、一定時間をかけて要素の不透明度を下げます。不透明度が0になると、displayプロパティはnoneになります。

これは、上で学んだhide()メソッドに不透明度のアニメーションを加えたものです。

FadeInはfadeOutメソッドと反対の動作をします。

fadeToggleメソッド

fadeToggle()メソッド

fadeToggle()メソッドはtoggle()メソッドに似ています。非表示なら表示し、表示されていれば非表示にします。名前からも想像できるように、この切り替えをアニメーションで行います。

<h1 id="target">Hello Coddy</h1>	
<button id="toggle">Fade Toggle</button>	

<script>
/*
fadeToggle() method shows or hides the 
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
  $('#target').fadeToggle();
});
</script>

CSSアニメーション

jQueryのアニメーションはanimate()メソッドで実行します。このメソッドのJSON引数には、対象要素のどのCSSプロパティを変更するかを定義します。

2つ目のパラメーターはアニメーション時間で、単位はミリ秒です（省略可能なパラメーターです）。

<div id="target">Box</div>

<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>

<script>
/*
The animate method takes a JSON object 
containing four properties as an argument.
*/
$("#target").animate({
            width: "100px",
            height: "100px",
            marginLeft: "50px",
            opacity: 0.5
        }, 4000);
</script>

アニメーションのイベントハンドラー

animateメソッドに指定できる最後の引数はイベントハンドラーです。これはアニメーションが終了したときに実行できます。

<div id="target">Box</div>

<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>

<script>
/*
The animate method takes a JSON object 
containing four properties as an argument.
*/
$("#target").animate({
            width: "100px",
            height: "100px",
            marginLeft: "50px",
            opacity: 0.5
        }, 4000, 
   function(){
    alert('animation is completed')
});
</script>

相対値によるアニメーション

アニメーションについて、もう1つ便利な機能を紹介します。

アニメーションで使用するプロパティには、絶対値ではなく相対値を設定できます。

以下の例を見ると、よりはっきり理解できます。

アニメーション中に、対象要素のtopプロパティへ100pxが加算されています。

$("button").animate({            
            top: "+=100px",
        });

アニメーションの停止

現在実行中のアニメーションを停止するには、アニメーションが定義されている対象を選択し、stop()メソッドを使用するだけで十分です。

const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();

あらかじめ用意されたメソッド

jQueryでCSSプロパティを自由に定義してアニメーションを作成できるだけでなく、jQueryが用意しているメソッドも使用できます。

それでは、以下のコードを見てみましょう。

//showing by slide up animation.
console.log("slideUp animation on div elements");

//hiding by slide up animation.
console.log("slideUp animation on div elements");

/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");

相対値によるアニメーション時間

他のアニメーションメソッドと同様に、このメソッドでアニメーションの時間を指定する場合は、最初の引数として渡します。

// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");

/*
We can also use a relative 
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");

イベントハンドラー

スライドアニメーションについて、もう1つ伝えることがありました。すみません、忘れていたようです。

animateメソッドと同じように（アニメーション完了時に実行するイベントハンドラーを定義するために）、上記のメソッドでも2つ目の引数として無名関数を定義できます。

setTimeout(function() {
	//Call when animation is completed
}, 1000);

おめでとうございます

おめでとうございます🎉

JQueryとアニメーションについて学びました。

次のセクションでは、AJAX操作について学びます。

よくある質問

「jQueryとアニメーション」レッスンは無料ですか？

はい。「jQueryとアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全1レッスンが含まれています。

「jQueryとアニメーション」で何を学びますか？

jQueryとアニメーションブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/1です。

「jQueryとアニメーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

← jQuery Academyに戻る