jQuery 시각효과
2021. 12. 7. 15:18ㆍStudy/jQuery
기본적인 시각효과
＊ jQuery에서는 간단한 메소드만으로 쉽게 애니메이션 구현이 가능하다
| display:block | display:none | 특징 | |
| show() | hide() | 애니메이션X | |
| slideDown() | slideUp() | 슬라이딩 애니메이션 | |
| fadeIn() | fadeOut() | 페이드인,아웃 에니메이션 | |
| toggle() | show(), hide()가 번갈아 실행 | ||
| slideToggle() | sildeDown(), slideUp() 을 번갈아 실행 | ||
| fadeToggle() | fadeIn(), fadeOut()을 번갈아 실행 | ||
네가지 형태으로 사용
$('.news .more').show();
$('.news .more').show(speed);
$('.news .more').show(speed, callback);
$('.news .more').show(speed, easing, callback);
| speed | slow, normal, fast, 1000 |
| callback | 효과를 모두 완료한 후에 실행한다 |
| easing | 애니메이션에 easing 속성 지정 |
예제
$(document).ready(function(){
$('.news .more').toggle(function () {
$('.newsContent').slideDown(300, function(){
alert('열림');
// 애니메이션이 끝나는 순간에 동작함
});
}, function () {
$('.newsContent').slideUp('fast');
});
});
toggle(); 예제
$(document).ready(function(){
$('.more').click(function(){
$('.newsContent').toggle('fast');
$('.newsContent').slideToggle('fast');
$('.newsContent').fadeToggle('fast');
});
});
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6; margin: 20px;}
a{color:inherit; text-decoration:none;}
img{vertical-align:top;}
.news{width:600px; padding:20px; border:1px solid #ccc;}
.news .hgroup{position:relative; margin-bottom:15px}
.news .hgroup .more{position:absolute; right:0; top:0}
.news .newsContent{ background:#FC9 url(images/newsimg.jpg) 0 0 no-repeat; padding-left:120px; display:none;}
.news p{text-align:justify;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery-migrate-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
// $('.news .more').toggle(function () {
// $('.newsContent').slideDown(300, function(){
// alert('열림');
// // 애니메이션이 끝나는 순간에 동작함
// });
// }, function () {
// $('.newsContent').slideUp('fast');
// });
$('.more').click(function(){
$('.newsContent').toggle('fast');
});
});
</script>
</head>
<body>
<div class="news">
<div class="hgroup">
<h3>롯데그룹 복지재단, 기행문집 '중국, 세계 경제의...</h3>
<a class="more" href="#"><img src="images/more.jpg" alt=""></a>
</div>
<div class="newsContent">
<p>
소브콤플로트社로부터 수주한 극지용 쇄빙선‥러시아 해상유전 개발 지원 예정. STX그룹은 STX유럽 자회사인 아크텍 헬싱키 조선소(Arctech Heisinki Shipyard)에서 러시아 최대 국영... 장학으로 받은 혜택 멘토링 활동 통해 재능기부 실천. STX장학생들이 청소년들과 함께 문화예술 프로그램을 진행하며 재능기부 활동에 앞장서고 있다. STX는 지난 주 STX장학재단 지식나...
</p>
</div>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery animate() feat.easing (0) | 2021.12.08 |
|---|---|
| jQuery 간단 갤러리 index (0) | 2021.12.07 |
| jQuery EVENT Bubbling , this (0) | 2021.12.07 |
| jQuery toogle 더보기 (0) | 2021.12.07 |
| jQuery attr() 속성변경 (0) | 2021.12.07 |
