Jquery의 동적 효과
예제1) 버튼을 누르면 텍스트가 나타나거나 사라지는 예제 (.show(), .hide())
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span { display:none; }
</style>
<!-- CDN 방식: 링크 방식으로 jquery를 쓸 수 있게 불러옴 -->
<!-- <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script> -->
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
//$(document).ready(function(){});
$(function(){
$("button:eq(0)").click(function(){
$("span:first").show();
});
$("button:eq(1)").click(function(){
$("span:first").hide();
});
$("button:eq(2)").click(function(){
$("span:last").show("slow", function(){
$(this).css('background', 'yellow');
});
});
$("button:eq(3)").click(function(){
$("span:last").hide("slow", function(){
$(this).css('background', '');
});
});
});
</script>
</head>
<body>
<button>Show It</button><button>Hide It</button>
<span>안녕하세요.</span><br>
<button>Show It slow</button><button>Hide It slow</button>
<span>반갑습니다.</span>
</body>
</html>
위쪽의 버튼을 누르면 텍스트가 나타나거나 사라지고,
아래쪽의 버튼을 누르면 천천히 텍스트가 나타나거나 사라진다.
예제2) 위의 예제를 버튼 1개의 토글 방식으로 구현 (.toggle())
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span { display:none; }
</style>
<!-- CDN 방식 -->
<!-- <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script> -->
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
//$(document).ready(function(){});
$(function(){
$("button:eq(0)").click(function(){
$("span:first").toggle();
});
$("button:eq(1)").click(function(){
$("span:last").toggle("slow", function(){
$(this).css('background', 'yellow');
});
});
});
</script>
</head>
<body>
<button>Show/Hide It</button>
<span>안녕하세요.</span><br>
<button>Show/Hide It slow</button>
<span>반갑습니다.</span>
</body>
</html>
예제3) 버튼을 누르면 슬라이드되며 블럭이 나타나는 예제 (slideUp, slideDown, slideToggle)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
background: #3d9a44;
margin: 3px;
width:80px;
height:40px;
float:left;
}
</style>
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.slideUp').click(function(){
$("div").slideUp();
});
$('.slideDown').click(function(){
$("div").slideDown();
});
$('.slideToggle').click(function(){
$("div").slideToggle("fast");
});
});
</script>
</head>
<body>
<button class="slideUp">slide Up</button>
<button class="slideDown">slide Down</button>
<button class="slideToggle">slide Toggle</button>
<p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
예제4) 버튼을 누를 때마다 보이지 않던 블럭들이 하나씩 나타나는 예제 (fadeIn)
fadeIn의 slow는 200 millisec, normal은 600 millisec, fast는 600 millisec으로 동작한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span {
color:red;
cursor:pointer;
}
div {
margin:3px;
width:80px;
height:80px;
display:none;
float:left;
}
div.red { background:#ff0000; }
div.green { background:#00ff00; }
div.blue { background:#0000ff; }
</style>
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(document.body).click(function(){
$("div:hidden:first").fadeIn("slow");
});
});
</script>
</head>
<body>
<span>클릭</span><p>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
예제4) fadeIn, fadeOut, fadeToggle을 사용한 예제
Jquery에서 $(document).ready(function(){} 는 $function(){} 으로 생략 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
p {
width:400px;
height:90px;
position:relative;
}
div {
position:absolute;
width:400px;
heigh: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 src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("#fadeIn").click(function(){
$("div").fadeIn("3000", function(){ //3초 동안 없던 것이 나타나는 fadeIn 효과
$("span").fadeIn(100); // 다음 그 밑의 문자열을 0.1초 동안 나타나게 함.
});
return false; // fadeIn에서 발생한 클릭 이벤트를 부모 태그로는 전달하지 않게 함.
// 기본값은 true이므로 원래는 상위 태그로도 해당 이벤트가 적용된다.
});
$("#fadeOut").click(function(){
$("div").fadeOut("3000", function(){
$("span").fadeIn(100);
});
return false;
});
$("#fadeToggle").click(function(){
$("div").fadeToggle("3000", function(){
$("span").fadeIn(100);
});
return false;
});
});
</script>
</head>
<body>
<p>정부는 국회법 개정안이 시행되면 입법부의 행정부에 대한 '과잉견제'가 가능해져 3권 분립을 침해할 소지가 있다고 보고 재의요구안(거부권)을 의결하기로 방침을 세운 것으로 알려졌다. 재의요구안을 의결한다는 말은 거부권을 행사한다는 의미다.
</p>
<div><span>S U C C E S S !</span></div>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
</body>
</html>
예제5) 클릭하면 특정 %로 사라지게 만드는 예제 (fadeTo)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
width:80px;height:80px;
margin:3px;float:left;
}
div#red {background:#ff0000;}
div#green {background:#00ff00;}
div#blue {background:#0000ff;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("#red").click(function(){
$(this).fadeTo("slow", 1);
});
$("#green").click(function(){
$(this).fadeTo("slow", 0.5);
});
$("#blue").click(function(){
$(this).fadeTo("slow", 0);
});
});
</script>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
예제6) 마우스 롤오버시 위치 이동 (animate로 left 위치값 변경)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
width:50px; height:50px;
background-color:orange;
position:relative;
margin:2px;
}
</style>
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('div').hover(function(){$(this).animate({left:500}, 'slow'); // 마우스 롤오버시
}, function(){$(this).animate({left:0}, 'slow'); // 마우스 롤아웃시
});
});
</script>
</head>
<body>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</body>
</html>
예제7) 클릭할 때마다 50씩 커지는 애니메이션 (animate로 width, height 변경)
Jquery의 css 메서드를 이용하여 속성을 적용.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
width:50px; height:50px;
background-color:orange;
}
</style>
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(function(){
$('div').click(function(){
var width = $(this).css('width');
var height = $(this).css('height');
$(this).animate({
width:parseInt(width) + 50,
height:parseInt(height) + 50,
}, 'slow');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
'jQuery Mobile' 카테고리의 다른 글
| Jquery 모바일: 트랜지션(Transition) (0) | 2016.05.31 |
|---|---|
| Jquery 모바일: 버튼 그룹 (0) | 2016.05.31 |
| Jquery 모바일: 버튼 아이콘 (0) | 2016.05.31 |
| Jquery 모바일: 다이얼로그(dialog) (0) | 2016.05.31 |
| Jquery 모바일의 구조 (0) | 2016.05.30 |
