jQuery Academy · レッスン

高度なトグルとスライド効果

.slideToggle()、.fadeToggle()、.animate()を高度に活用し、滑らかで応答性が高く、視覚的にも魅力的な表示・非表示やトランジション効果を作成します。

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

高度なトグルへようこそ

このレッスンでは、動的な表示・非表示効果を作成するjQueryの強力なメソッドについて、さらに詳しく学びます。.slideToggle()、.fadeToggle()、そして.animate()を使ったカスタムトランジションを習得しましょう。

これらのテクニックは、インタラクティブで見た目にも魅力的なユーザーインターフェースを構築するために欠かせません。

slideToggle()で要素をスライドさせる

.slideToggle()メソッドは対象要素の高さをアニメーションさせ、要素を上または下にスライドさせます。要素が表示されている場合は上にスライドして非表示になり、非表示の場合は下にスライドして表示されます。

折りたたみ可能なメニューや、展開できるコンテンツセクションに最適です。次の例を実行してみましょう。

// HTML for context:
// <button id="toggleButton">Toggle Panel</button>
// <div id="myPanel" style="background-color: lightblue; padding: 10px;">
//   <p>This is a sliding panel!</p>
// </div>

$(document).ready(function() {
  $("#toggleButton").click(function() {
    $("#myPanel").slideToggle();
  });
});

slideToggle()をカスタマイズする

.slideToggle()に時間（ミリ秒、または'slow'、'fast'）を渡すことで、アニメーションの速度を制御できます。また、アニメーションの完了時に実行するコールバック関数も指定できます。

.slideToggle(duration)
.slideToggle(duration, callback)

以下のコードで速度を変えて試してみましょう。

// HTML for context:
// <button id="speedToggleBtn">Toggle Fast</button>
// <p id="speedPanel" style="background-color: #e0ffe0; padding: 10px;">
//   I slide fast and then alert!
// </p>

$(document).ready(function() {
  $("#speedToggleBtn").click(function() {
    $("#speedPanel").slideToggle("fast", function() {
      alert("Animation finished!");
    });
  });
});

fadeToggle()で要素をフェードさせる

.slideToggle()と同様に、.fadeToggle()メソッドは不透明度をアニメーションさせて、対象要素を表示または非表示にします。要素が表示されている場合はフェードアウトし、非表示の場合はフェードインします。

これにより、滑らかで透明感のある切り替え効果を作成できます。実際の動作を見てみましょう。

// HTML for context:
// <button id="fadeToggleBtn">Toggle Fade</button>
// <div id="fadePanel" style="background-color: #ffe0e0; padding: 10px;">
//   <p>This panel fades in and out!</p>
// </div>

$(document).ready(function() {
  $("#fadeToggleBtn").click(function() {
    $("#fadePanel").fadeToggle();
  });
});

fadeToggle()をカスタマイズする

.slideToggle()と同様に、.fadeToggle()の速度をカスタマイズし、コールバック関数を追加できます。これにより、フェード完了後に処理を連続して実行したり、別の処理を行ったりできます。

.fadeToggle(duration)
.fadeToggle(duration, callback)

ゆっくりしたフェードと色の変化を確認してみましょう。

// HTML for context:
// <button id="customFadeBtn">Toggle Custom Fade</button>
// <p id="customFadePanel" style="background-color: #e0e0ff; padding: 10px;">
//   I fade slowly and change color!
// </p>

$(document).ready(function() {
  $("#customFadeBtn").click(function() {
    $("#customFadePanel").fadeToggle(1000, function() {
      $(this).css("color", "purple");
    });
  });
});

スライドとフェードを組み合わせる

.slideToggle()と.fadeToggle()を組み合わせると、より複雑な効果を作成できます。たとえば、要素を下にスライドさせながらフェードインさせたり、その逆を行ったりできます。

これらを順番に呼び出すと、効果は1つずつ適用されます。完全に同時に効果を適用したい場合は、.animate()が適していることが多いです（次で確認します）。

// HTML for context:
// <button id="mixedToggleBtn">Toggle Mixed</button>
// <div id="mixedPanel" style="background-color: #ffffe0; padding: 10px;">
//   <p>I will slide and fade!</p>
// </div>

$(document).ready(function() {
  $("#mixedToggleBtn").click(function() {
    $("#mixedPanel").slideToggle(500);
    $("#mixedPanel").fadeToggle(500);
  });
});

アニメーション付きのシンプルなトグル

基本的な.toggle()メソッドを覚えていますか。これは要素を表示または非表示にするだけです。ただし、.slideToggle()や.fadeToggle()と同様に、時間とコールバックのパラメーターも受け取れます。

アニメーションのパラメーターを指定すると、.toggle()はデフォルトで実質的に.fadeToggle()として動作します。

// HTML for context:
// <button id="simpleToggleBtn">Toggle with Animation</button>
// <p id="simpleTogglePanel" style="background-color: #f0f0f0; padding: 10px;">
//   I toggle with a default fade effect.
// </p>

$(document).ready(function() {
  $("#simpleToggleBtn").click(function() {
    $("#simpleTogglePanel").toggle("slow", function() {
      console.log("Toggle animation done!");
    });
  });
});

カスタムトグル効果を作成する

最大限の制御が必要な場合は、.animate()メソッドを使います。数値で指定できるほぼすべてのCSSプロパティをアニメーションさせられます。カスタムトグル効果を作成するには、height、opacity、left／topなどのプロパティをアニメーションさせます。

ポイントは、特定の値までアニメーションさせるか、heightやwidthなどのプロパティに特殊な'toggle'キーワードを使うことです。

// HTML for context:
// <button id="customAnimateBtn">Custom Animate Toggle</button>
// <div id="customAnimatePanel" style="background-color: lightgreen; padding: 10px; height: 100px; overflow: hidden;">
//   <p>I animate my height to toggle!</p>
// </div>

$(document).ready(function() {
  $("#customAnimateBtn").click(function() {
    $("#customAnimatePanel").animate({
      height: 'toggle' // Animates height to 'toggle' (show/hide)
    }, 500);
  });
});

カスタムアニメーションを同時に実行する

複数のCSSプロパティを一度に変更して、組み合わせたトグル効果を作成したい場合に、.animate()の真価が発揮されます。heightとopacityを同時にアニメーションさせることで、スライドとフェードを組み合わせた効果を実現できます。

不透明度を0までアニメーションさせた後に要素をレイアウトから完全に消したい場合は、displayプロパティも適切に処理する必要があります。

// HTML for context:
// <button id="combinedAnimateBtn">Combined Toggle</button>
// <div id="combinedAnimatePanel" style="background-color: lightcoral; padding: 10px; height: 100px; opacity: 1; overflow: hidden;">
//   <p>I slide AND fade!</p>
// </div>

$(document).ready(function() {
  $("#combinedAnimateBtn").click(function() {
    var panel = $("#combinedAnimatePanel");
    if (panel.is(":visible")) {
      panel.animate({
        height: '0px',
        opacity: '0'
      }, 500, function() {
        $(this).hide(); // Ensure display: none after animation
      });
    } else {
      panel.show().animate({ // Show first, then animate
        height: '100px',
        opacity: '1'
      }, 500);
    }
  });
});

トグルの知識を確認する

次のうち、要素の表示・非表示をアニメーションさせる効果の作成に使えるjQueryメソッドはどれでしょうか。

トグルとアニメーションのまとめ

よくできました。動的な表示・非表示効果を実現する高度なjQueryテクニックを習得しました。

縦方向のスライドには.slideToggle()を使いました。
滑らかな不透明度の切り替えには.fadeToggle()を使いました。
.toggle()でもアニメーションできることを確認しました。
最も重要な点として、.animate()を使えば、複数のCSSプロパティを細かく制御しながら、完全にカスタムした複合トグル効果を作成できることを学びました。

練習を続けて、魅力的でインタラクティブなUIを作成しましょう。

よくある質問

「高度なトグルとスライド効果」レッスンは無料ですか？

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

「高度なトグルとスライド効果」で何を学びますか？

.slideToggle()、.fadeToggle()、.animate()を高度に活用し、滑らかで応答性が高く、視覚的にも魅力的な表示・非表示やトランジション効果を作成します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「高度なトグルとスライド効果」レッスンにはどのくらい時間がかかりますか？

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

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

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

このコースのすべてのレッスン

← jQuery Academyに戻る