Heidong 2021. 11. 1. 21:28 Show 토글은 요소가 보이면 보이지 않게 안보이면 보이게 만드는 메소드 이다. 같은 기능을 show() 와 hide()를 이용해서 만들 수 있는데 토글을 사용하면 코드가 더 간결해지면서 같은 효과를 낼 수 있다. (다만 show() hide()는 속도를 조절 할 수 있어서 좋음) faq-body 클래스를 받고있는 태그 안에 h3 태그인데 question 클래스를 받고 있는 h3을 클릭하면 다음 태그를 토글 하겠다 (숨겨져 있으면 보이게하고 보여지고 있으면 숨기겠다.) jQuery의 .slideToggle()은 객체를 말아올리거나 펼치는 효과를 낸다. .slideToggle()의 형식은 아래와 같다. .slideToggle( [움직임 시간(duration)] [, 움직이고 나서 실행할 함수(callback)] ) 움직임 시간은 밀리초(ms) 단위로 넣거나 slow, normal, fast를 쓸 수 있다. 아래는 jQuery로 단추(button)를 딸깍하면 상자(div)가 펼쳐져 있으면 말아올려서 접고, 접혀 있으면 천천히 펼쳐내리는 예제이다. <미리보기>단추로 쓸 객체를 button 태그 대신 span이나 div로 바꾸어도 된다. 접거나 펼치는 시간은 slow가 600밀리초, fast는 200밀리초이다.
* 이 포스팅은 네이버 블로그에서 작성(2013.04.02)한 내용을 옮겨온 것입니다. 오늘은 자바스크립트 라이브러리 중 하나인 jQuery 에서 사용 가능한 이펙트 함수 중 가장 빈번하게 쓰이는 " show / hide / toggle " 에 대해 알아보고자 합니다. 검색해서 들어오셨다면 기본적인 jQuery 사용 방법은 숙지하셨다 생각하고 바로 본론으로 들어갑시다! 보여주거나 감추고 싶은 태그 ID를 넣어주면 됩니다. 간단합니다. 더 정확한 문법은 다음과 같습니다. 정확한 이해를 위해 예제 코드를 보면 좋겠죠? 여기를 클릭해서 연습합시다. show() / hide() Complex Example예전엔 이런식의 코드도 많이 사용했었습니다. 지금도 사용 가능합니다. function toggle_layer() {
if($("#layer").css("display") == "none"){
$("#layer").show();
}else{
$("#layer").hide();
}
}
위와 같은 함수를 만들땐 여러가지 복합적으로 처리를 할 때 가끔 사용하면 좋겠죠. 하지만 단순한 on/off 기능이 필요하다면 toggle() 함수를 써봅시다. toggle() Example$("#tagID").toggle(); // show -> hide , hide -> show
toggle()을 사용하게 되면 이전 상태에 따라 현재 상태를 반대로 바꿔줍니다. toggle() Syntax$(selector).toggle(speed,callback);
정확한 이해를 위해 예제 코드를 봅시다. 여기를 클릭해서 연습합시다. 간단하게 show() / hide() / toggle() 에 대해 알아봤습니다. 틀린 부분, 추가 보충해야 할 부분 전부 댓글에 적어주시면 고맙겠습니다! toggle 원문 링크  .toggle( [duration] [, callback] )Returns : jQuery 개요 : 일치하는 요소 표시 또는 숨기기.
조건과 일치하는 요소는 효과없이 보이게 되거나 숨겨지게 되는데, CSS 의 시간값(duration)을 세팅하면, 시간값(Durations) 의 기본 단위는 밀리세컨드(milliseconds) 입니다. 높은 값을 주면 느려지고 반대는 빨라집니다. jQuery 1.4.3 버전에 와서, easing 함수를 사용할 수 있는 문자열을 사용할 수 있게 되었습니다. Easing 함수란 스피드를 조작하여 특별한 효과를 나타나게 하는 함수를 의미합니다. jQuery 가 기본적으로 가지고 있는 easing 표현은 콜백 함수를 인자로 사용하면 애니메이션 효과가 완료되면 해당 콜백함수가 실행됩니다. 연속적으로 다른 애니메이션 효과를 추가할 때 유용한 사용법입니다. 단, 콜백 함수는 이미지를 예로 보겠습니다. <div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" />
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
아래와 같이 동작합니다.
두번째 클릭을 하면 showOrHide 를 사용하는 방법을 보겠습니다. 이 인자가 $('#foo').toggle(showOrHide);if ( showOrHide == true ) {
$('#foo').show();
} else if ( showOrHide == false ) {
$('#foo').hide();
}
예 제 <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
미리보기 토글이 되면서 마치 바뀌는 것 같습니다. 사실 각각의 p 태그가 토글되고 있는 겁니다. 예 제 <!DOCTYPE html>
<html>
<head>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$("button").click(function () {
$("p").toggle("slow");
});
</script>
</body>
</html>
미리보기 본문에서 처럼 width, height, opacity 가 바뀝니다. 예 제 <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
</script>
</body>
</html>
미리보기 이 예제는 무슨 의미인지 잘 모르겠네요. ^^;; 토글함수는 jquery의 진리입니다. 아주 유용해요. 잘 사용하세요. 그럼 즐프하세요. ※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다. |
JQuery toggle 옵션 - jQuery toggle obsyeon
저작권 © 2024 nguoilontuoi Inc.
