1. 기본 효과
13-01.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>13-01</title>
<script src="js/jquery-1.11.2.js"></script>
<style type="text/css">
div.card {
background:#ece023; width:30px;
height:40px; margin:2px; float:left;
line-height: 2; text-align: center; font-weight: bold;
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#show").click(function () {
$("div.card").first().show("fast", function showCard() {
$(this).next("div.card").show("fast", showCard);//재귀호출함
//this는 first요소임 처음에
});
});
$("#hide").click(function () {
$("div.card").last().hide("fast", function hideCard() {
$(this).prev("div.card").hide("fast", hideCard);
});
});
});
</script>
</head>
<body>
<div>
<button id="show">보이기</button>
<button id="hide">감추기</button>
</div>
<div>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
</body>
</html>
출력 화면
2. 페이딩
13-02.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>13-02</title>
<script src="js/jquery-1.11.2.js"></script>
<style type="text/css">
.pictframe {
color: #AAAAAA;
border: 1px solid #444;
width:302px; height:400px;
}
#image {
position: relative;
width:302px; height:400px;
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#fadein").click(function () {
$("#image").fadeIn(3000);//3초로 지정
});
$("#fadeout").click(function () {
$("#image").fadeOut(3000);
});
});
</script>
</head>
<body>
<div class="pictframe">
<img src="alaskan_malamute.jpg" id="image" />
</div>
<div>
<button id="fadein">페이드인</button>
<button id="fadeout">페이드아웃</button>
</div>
</body>
</html>
출력 화면
3. 슬라이딩
13-03.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>13-03</title>
<script src="js/jquery-1.11.2.js"></script>
<style type="text/css">
body {
width: 360px;
}
.header {
color: #000080;
font-size: 24pt;
}
.content {
color: #008000;
}
.footer {
color: #800080;
font-size: 14pt;
}
ul#menubar {
width: 360px;
}
ul#menubar, ul#menubar ul {
text-indent: 10px;
list-style: none;
padding: 0;
}
li.menu {
margin-bottom: 2px;
}
div.menuitem {
height: 32px;
line-height: 2;
background: #6b8e23;
color: #ffffff;
font-weight: bold;
cursor: pointer;
}
ul.submenuitem li {
height: 32px;
line-height: 2;
background-color: #f5f5dc;
cursor: pointer;
}
ul.submenuitem li a {
color: #000000;
text-decoration: none;
overflow: hidden;
display: block;
width: 100%;
height: 100%;
}
ul.submenuitem li:hover{
background: #f0e68c;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#header').addClass('header');
$('#content').addClass('content');
$('#footer').addClass('footer');
$('.submenuitem').hide();
$('div.menuitem').bind('click', function() {
//클릭이 발생한 요소
if ($(this).next().css('display') == 'none') {//안보이면
$('.submenuitem').slideUp(); //모든 .submenuitem은 슬라이드 업
// $(this).next().slideDown(); //이 주석 풀고 윗 주석 처리하고 해보세요
}//else //이 주석 풀고 윗 주석 처리하고 해보세요
//$(this).next().slideUp(); //이 주석 풀고 윗 주석 처리하고 해보세요
$(this).next().slideDown();//아래것만 슬라이드 다운
});
});
</script>
</head>
<body>
<div id="header">
<p>jQuery Effect</p>
</div>
<div id="content">
<ul id="menubar">
<li class="menu">
<div class="menuitem">Andoird</div>
<ul class="submenuitem">
<li><a href="#">Android 네트워크 고급활용</a></li>
<li><a href="#">Android를 위한 Advanced Java</a></li>
<li><a href="#">Android 기반의 모바일 게임 프로그래밍</a></li>
</ul>
</li>
<li class="menu">
<div class="menuitem">iOS</div>
<ul class="submenuitem">
<li><a href="#">iPhone을 위한 Objective-C</a></li>
<li><a href="#">iPhone 애플리케이션 프로그래밍</a></li>
</ul>
</li>
<li class="menu">
<div class="menuitem">하이브리드 앱</div>
<ul class="submenuitem">
<li><a href="#">웹 기술을 활용한 하이브리드 앱 프로그래밍</a></li>
<li><a href="#">HTML5 활용을 위한 자바스크립트</a></li>
<li><a href="#">HTML5와 CSS3를 활용한 모바일 웹 프로그래밍</a></li>
</ul>
</li>
<li class="menu">
<div class="menuitem">모바일 앱 기획</div>
<ul class="submenuitem">
<li><a href="#">논리적 사고와 기획안 작성</a></li>
<li><a href="#">모바일 웹 앱 동향</a></li>
<li><a href="#">모바일 서비스 기획</a></li>
<li><a href="#">앱 아이디어 도출 및 사업기획서 작성</a></li>
</ul>
</li>
<li class="menu">
<div class="menuitem">UX</div>
<ul class="submenuitem">
<li><a href="#">모바일 디자인을 위한 Photoshop Skill-Up</a></li>
<li><a href="#">Mobile UX Insight</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>© 2014 T academy</p>
</div>
</body>
</html>
출력 화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러 사용법 (0) | 2015.02.02 |
|---|---|
| Javascript - jQuery Mobile 컴포넌트 - 폼 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 리스트뷰 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바 (0) | 2015.01.29 |
| Javascript - 셀렉터 기본 개념 및 예제 (0) | 2015.01.28 |
| Javascript - jQuery와 jQuery Mobile 개요 및 aptana 개발환경 세팅 (0) | 2015.01.27 |
| Javascript - 간단한 가위바위보 게임 만들기 (2) | 2015.01.27 |
| Javascript - 웹브라우저 별 이벤트 처리 (0) | 2015.01.25 |