고급 토글 및 슬라이드 효과

고급 토글 학습을 시작해 보세요!

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() 사용자 지정하기

// 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()로 요소 페이드하기

// 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() 사용자 지정하기

// 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");
    });
  });
});

슬라이드와 페이드 결합하기

// 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);
  });
});

애니메이션을 사용한 간단한 토글

// 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!");
    });
  });
});

사용자 지정 토글 효과 만들기

// 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);
  });
});

사용자 지정 애니메이션 동시에 적용하기

// 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);
    }
  });
});

토글 지식 확인하기

토글 및 animate 요약