728x90
반응형
슬라이드(slide) 효과
제이쿼리에서 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현합니다.
이러한 슬라이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같습니다.
1. .slideUp()
2. .slideDown()
3. .slideToggle()
슬라이드 업(slide up)과 슬라이드 다운(slide down)
.slideUp() 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여줍니다.
또한, .slideDown() 메소드는 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여줍니다.
예제
$(function() {
$("#slideUpBtn").on("click", function() {
$("#divBox").slideUp(); // id가 "divBox"인 요소를 올라가면서 사라지게 함.
});
$("#slideDownBtn").on("click", function() {
$("#divBox").slideDown(); // id가 "divBox"인 요소를 내려오면서 나타나게 함.
});
});
인수로 밀리초에 해당하는 숫자나 "slow", "fast" 등의 예약어를 전달하여, 슬라이드 효과의 속도를 조절할 수도 있습니다.
예제
$(function() {
$("#slideUpBtn").on("click", function() {
$("#divBox").slideUp(500); // id가 "divBox"인 요소를 0.5초에 걸쳐 올라가면서 사라지게 함.
});
$("#slideDownBtn").on("click", function() {
$("#divBox").slideDown(300); // id가 "divBox"인 요소를 0.3초에 걸쳐 내려오면서 나타나게 함.
});
});슬라이드 효과의 토글
제이쿼리에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .slideToggle() 메소드를 사용할 수 있습니다.
선택한 요소가 현재 사라진 상태라면 .slideDown() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .slideUp() 메소드의 동작을 수행합니다.
예제
$(function() {
$("#slideToggleBtn").on("click", function() {
// id가 "divBox"인 요소를 빠르게 올라가면서 사라지거나 내려오면서 나타나게 함.
$("#divBox").slideToggle("fast");
});
});슬라이드 효과와 관련된 메소드
| .slideUp() | 선택한 요소의 CSS height 속성값을 높여가며 요소를 사라지게 함. |
| .slideDown() | 선택한 요소의 CSS height 속성값을 낮춰가며 요소를 나타나게 함. |
| .slideToggle() | 선택한 요소에 slideUp() 메소드와 slideDown() 메소드를 번갈아가며 적용함. |
https://www.tcpschool.com/jquery/jq_effect_slide
jquery_3.7.1.js
0.28MB
styles2.css
0.00MB
images.zip
0.23MB
슬라이드쇼.html
0.00MB
슬라이드쇼.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>슬라이드 쇼 - 기본형 | jQuery book demos</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<link rel="stylesheet" type="text/css" href="styles2.css" />
</head>
<body>
<h1>slideshow</h1>
<!-- <div class="slideshow">
<img src="imgs/animal1.jpg" alt="" />
<img src="imgs/animal2.jpg" alt="" class="alt" />
</div>
<div class="slideshow">
<img src="imgs/sea1.jpg" alt="" />
<img src="imgs/sea2.jpg" alt="" class="alt" />
<img src="imgs/sea3.jpg" alt="" class="alt" />
</div> -->
<div class="slideshow">
<img src="imgs/flower1.jpg" alt="" />
<img src="imgs/flower2.jpg" alt="" class="alt" />
<img src="imgs/flower3.jpg" alt="" class="alt" />
<img src="imgs/flower4.jpg" alt="" class="alt" />
</div>
<script>
// $(function(){
// let interval = 3000;
// $(".slideshow").each(function () {
// let container = $(this); // 현재 슬라이드쇼 요소 선택
// function switchlmg() { // 이미지 전환 함수 정의
// let imgs = container.find("img"); // 슬라이드쇼 내의 모든 이미지 선택
// let first = imgs.eq(0); // 첫번째 이미지 선택
// let second = imgs.eq(1); // 두번째 이미지 선택
// first.appendTo(container).fadeOut(); // 첫 번째 이미지를 컨테이너의 마지막으로 이동시키고 페이드 아웃
// second.fadeIn(); // 두번째 이미지 페이드 인
// }
// setInterval(switchlmg, interval); // 지정된 가격마다 switchimg 함수를 호출
// });
// });
$(function(){
let interval = 3000;
$(".slideshow").each(function () {
var container = $(this); // 현재 슬라이드쇼 요소 선택
function switchlmg() { // 이미지 전환 함수 정의
var imgs = container.find("img"); // 슬라이드쇼 내의 모든 이미지 선택
var first = imgs.eq(0); // 첫번째 이미지 선택
var second = imgs.eq(1); // 두번째 이미지 선택
first.appendTo(container).fadeOut(); // 첫 번째 이미지를 컨테이너의 마지막으로 이동시키고 페이드 아웃
second.fadeIn(); // 두번째 이미지 페이드 인
}
setInterval(switchlmg, interval); // 지정된 가격마다 switchimg 함수를 호출
});
});
</script>
</body>
</html>
728x90
반응형
'jQuery' 카테고리의 다른 글
| jQuery(페이드 효과)_2024-07-30 (2) | 2024.07.30 |
|---|---|
| jQuery(jQuery.fx 객체)_2024-07-29 (0) | 2024.07.30 |
| jQuery(jQuery 기본 및 DOM 조작 가이드)_2024-07-29 (0) | 2024.07.29 |
| jQuery(요소의 복사 및 삭제)_2024-07-25 (0) | 2024.07.25 |
| jQuery(getter 메소드와 setter 메소드)_2024-07-25 (0) | 2024.07.25 |
