jQuery

[jQuery] effect

maribel 2019. 9. 19. 14:44

1. slide

<style>
	div {
		background:#3d9a44;
		margin:3px;
		width:80px;height:40px;
		float:left;	
	}
</style>
<script>
$(function(){
	//slideup
	$('#slideup').click(function(){
		//형식) $('선택자').slideUp() or slideUp(유지시간,함수)
		$('div').slideUp()
	})
    
	//slidedown
	$('#slidedown').click(function(){
		//형식) $('선택자').slideDown() or slideDown(유지시간(초,문자열(slow,fast)),함수)
		$('div').slideDown("slow")
	})
	
	//slideToggle
	$('#slideToggle').click(function(){
		//형식) $('선택자').slideToggle() or slideToggle(유지시간(초,문자열(slow,fast)),함수)
		$('div').slideToggle("slow")
	}) 
})
</script>

<body>
	<button id="slideup">slideup</button>
	<button id="slidedown">slidedown</button>
	<button id="slideToggle">slideToggle</button>
	<p>
	<div></div><div></div><div></div><div></div>
</body>

2. fadeIn, fadeOut, fadeToggle

<style>
	p {position:relative;width:400px;height:90px;}
	div {position:absolute;width:400px;height:65px;
			font-size:36px;text-align:center;
			color:yellow;background:red;
			padding-top:25px;top:0;left:0;display:none;/*처음에는 안보이게 설정*/
	}
	span {display:none}
</style>
<script>
$(function(){
	//fadeIn->서서히 화면이 보이는 경우
	$('#fadeIn').click(function(){
		//형식 $('선택자').fadeIn(애니메이션 유지시간->함수호출)
		$('div').fadeIn(3000,function(){	//div태그를 3초동안 서서히 보여준뒤
			$('span').fadeIn(100)	//0.1초 -> 1000(초)
		})
	})
	
	//fadeOut --> 불투명도 감소 -> 서서히 사라짐(투명도)
	$('#fadeOut').click(function(){
		//형식 $('선택자').fadeOut(애니메이션 유지시간(초,slow,fast)->함수호출)
		$('div').fadeOut(3000,function(){	//div태그를 3초동안 서서히 보여준뒤
			$('span').fadeIn(100)	//0.1초 -> 1000(초)
		})
	})
	//fadeToggle
	$('#fadeToggle').click(function(){
		//형식 $('선택자').fadeToggle(애니메이션 유지시간(초,slow,fast)->함수호출)
		$('div').fadeToggle(3000,function(){	//div태그를 3초동안 서서히 보여준뒤
			$('span').fadeIn(100)	//0.1초 -> 1000(초)
		})
	})
	
})
</script>

<body>
<p>
fade TEST
fade TEST!
fade TEST!!
</p>
<div><span>Success!</span></div>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
</body>

3. fadeTo

<style>
	.small img {border:none; margin:10px; width:60px; height:60px}
</style>
<script>
$(function(){
	$('.small a').hover(function(){
		var imgname=$(this).attr('href')
		//fadeIn,fadeOut-->fadeTo(유지시간,투명도(0 or 1),효과완료후 처리할 함수)
		$('.large').fadeTo("slow",0,function(){
			$('.large').attr('src',imgname)
		}).fadeTo("slow",1)
	},function(){})
})
</script>

<body>
	<div class="small">
	<a href="../img/photo1.jpg"><img src="../img/photo1.jpg"></a>
	<a href="../img/photo2.jpg"><img src="../img/photo2.jpg"></a>
	<a href="../img/photo3.jpg"><img src="../img/photo3.jpg"></a>
	<a href="../img/photo4.jpg"><img src="../img/photo4.jpg"></a>
	<a href="../img/photo5.jpg"><img src="../img/photo5.jpg"></a>
	<a href="../img/photo6.jpg"><img src="../img/photo6.jpg"></a>
	</div>
	<img src="../img/photo1.jpg" class="large">
</body>