Dev/jQuery

[jQuery] jQuery 효과주기(fade, slide, animate)

쇼크리더 2009. 11. 30. 16:02
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		.DivCss
		{
			position: relative;	/*해당 요소가 relative or absolute 로 설정(기본값:static)되어야 animate가 동작 */
			background-color: #FFFFCC; border: thin dotted #000000; padding: 2px; margin: 0px; width: 200px;
		}
	</style>
	<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(function () {
			$('p:eq(1)').hide();
			$('span.more').click(function () {
				//효과 속도 
				//slow: 0.6초 안에, normal: 0.4초 안에, fast: 0.2초안에 효과가 완성.
				//또는 미리초로 지정 할 수 있음. ex) show(700)
				//$('p:eq(1)').show(1000);

				//페이드인, 페이드아웃
				//속도는 효과속도와 같음
				//$('p:eq(1)').fadeIn(1000);

				//애니메이션
				$('p:eq(1)')
					.animate({ left: 650 }, 'slow')		//왼쪽에서 650 띄우기
					.animate({ height: 200 }, 'slow')	//높이 200으로 키우기
					.fadeTo('1000', 0.5) 				//fade 1초안에 50%로 변환
					.slideUp('slow') 						//slow 속도로 위로 접기
					.slideDown('slow') 			//slow 속도로 펼치기
					.fadeTo('slow', 1.0, function () {		////fade 1초안에 100%로 변환 후 backgroundColor 변환
						$(this).css('backgroundColor', '#EBFABE');
					});

				$(this).hide();
			});
		});
	
		$(document).ready(function () {
			$('input.button').click(function () {
				var $speech = $('div.speech');
				var currentSize = $speech.css('fontSize');
				var num = parseFloat(currentSize, 10);
				var unit = currentSize.slice(-2);

				if (this.id == 'btn1') {
					num *= 1.4;
				} else if (this.id == 'btn2') {
					num /= 1.4;
				}
				$speech.css('fontSize', num + unit);
			});
		});
	</script>
</head>
<body>
	<input id="btn1" type="button" class="button" value="글자키우기" />
	<input id="btn2" type="button" class="button" value="글자줄이기" />
	<div class="speech">
		<p>Visual C#은 Microsoft에서 구현한 C# 언어입니다. Visual Studio에서는 모든 기능을 갖춘 코드 편집기, 컴파일러, 프로젝트 템플릿, 디자이너
		<span class="more">...</span></p>
		<p class="DivCss"> C#("시 샵"으로 발음)은 .NET Framework에서 실행되는 다양한 응용 프로그램을 만들기 위해 디자인된 프로그래밍 언어입니다. C#은 간결하고, 강력하며, 형식이 안전한 개체 지향적인 언어입니다. C#은 여러 가지 혁신적인 기술을 통해 C 스타일 언어의 표현성과 우아함을 그대로 유지하면서 신속한 응용 프로그램 개발을 지원합니다. </p>
	</div>
</body>
</html>


보여지는 이미지는 생략.. 실행해보면 잘 나옴.
반응형