jQuery] 이펙트 메서드( slide, fade, animate )

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
	img{width: 200px; height: 200px; position: absolute; left: 200px; top: 100px;}
	p{width: 100px; border: 1px solid red; position: absolute; left: 10px; display: none;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
</head>
<body>

	<b>이펙트 메서드</b>

	<div>
		<p>hide()</p>
		<p>show()</p>
		<p>toggle()</p>
		<p>slideUp()</p>
		<p>slideDown()</p>
		<p>slideToggle()</p>
		<p>fadeOut()</p>
		<p>fadeIn()</p>
		<p>fadeTo()</p>
		<p>fadeToggle()</p>
		<p>animate()</p>
	</div>
	<img id="img01" alt="image" src="resources/image/img01.png">
	
	<script type="text/javascript">

	$(function(){
		$("b").click(function(){
			$("p").toggle();
			$("p").each(function(i){
				$(this).animate({
					"top": 50 * (i + 1) + "px"
				}, 1000);
			});
		});
	
	
		$("p").bind("click", function(){
			var ele = $(this)
			ele.css("background", "hotpink");
			ele.siblings("p").css("background-color", "");
			
			if(ele.is("p:contains(hide)")){
				$("img").hide();
			}
			if(ele.is("p:contains(show)")){
				$("img").show();
			}
			if(ele.is("p:contains(toggle)")){
				$("img").toggle();
			}
			if(ele.is("p:contains(slideUp)")){
				$("img").slideUp();
			}
			if(ele.is("p:contains(slideDown)")){
				$("img").slideDown();
			}
			if(ele.is("p:contains(slideToggle)")){
				$("img").slideToggle();
			}
			if(ele.is("p:contains(fadeOut)")){
				$("img").fadeOut();
			}
			if(ele.is("p:contains(fadeIn)")){
				$("img").fadeIn();
			}
			if(ele.is("p:contains(fadeTo)")){
				$("img").fadeTo(4000, 0.2);
			}
			if(ele.is("p:contains(fadeToggle)")){
				$("img").fadeToggle();
			}
			if(ele.is("p:contains(animate)")){
				$("#img01").animate({
					"width": "500px",
					"height": "500px",
					"left": "600px",
					"top": "0px",
				}, 2000)
			}
		});
	});

</script>
	
</body>
</html>

$("b").click(function(){
	$("p").toggle();
	$("p").each(function(i){
		$(this).animate({
			"top": 50 * (i + 1) + "px"
		}, 1000);
	});
});

div영역은 숨겨져 있습니다. 하지만 위의 코드로인해 이펙트 메서드라는 텍스트를 클릭하면 다시 보이게 됩니다.

이제 각각의 이펙트 메서드들의 효과를 하나씩 볼까요?

if(ele.is("p:contains(hide)")){
	$("img").hide();
}

hide는 숨김 메서드입니다.

if(ele.is("p:contains(show)")){
	$("img").show();
}

숨겨져 있던것을 보여줍니다.

if(ele.is("p:contains(toggle)")){
	$("img").toggle();
}

toggle()은 숨기는 기능과 보여주는 기능을 동시에 가지고 있습니다.

if(ele.is("p:contains(slideUp)")){
	$("img").slideUp();
}

이미지가 위로 올라가면서 사라집니다.

if(ele.is("p:contains(slideDown)")){
	$("img").slideDown();
}

이미지가 아래쪽으로 내려오며 다시 보여집니다.

if(ele.is("p:contains(slideToggle)")){
	$("img").slideToggle();
}

toggle과 비슷하지만 위로올라가며 이미지가 사라지고 아래로 내려오며 이미지가 보여집니다.

if(ele.is("p:contains(fadeOut)")){
	$("img").fadeOut();
}

점점 투명해지며 이미지가 사라집니다.

if(ele.is("p:contains(fadeIn)")){
	$("img").fadeIn();
}

점점 불투명해지며 이미지가 보여집니다.

if(ele.is("p:contains(fadeTo)")){
	$("img").fadeTo(4000, 0.2);
}

지정해준 투명도까지만 투명해집니다.

if(ele.is("p:contains(fadeToggle)")){
	$("img").fadeToggle();
}

서서히 투명해지다가 사라집니다. 한번 더 효과를 적용시켜도 다시 사라집니다.

if(ele.is("p:contains(animate)")){
	$("#img01").animate({
		"width": "500px",
		"height": "500px",
		"left": "600px",
		"top": "0px",
	}, 2000)
}

이미지의 크기와 위치를 변경시켜주었습니다.

이것도 애미메이션 효과가 나옵니다

728x90

'JS 관련 > JQuery' 카테고리의 다른 글

[jQuery] 메뉴 숨기기 보이기( 이펙트 메서드 활용 ) (1)	2022.02.20
[jQuery] 이펙트 메서드( animate() ) (0)	2022.02.19
[jQuery] 이벤트 전파( stopPropagation(), preventDefault(), return false ) (0)	2022.02.17
[jQuery] DOM탐색 메서드 (0)	2022.02.16
[jQuery] add(), is() (0)	2022.02.15

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바