<script>
/* jQuery Effect
A. effect method
show() : 문서객체를 보이게 하기
hide() : 문서객체를 보이게 하기
toggle() : show() hide() 번갈아 수행
slidedown() : 슬라이드 효과 보이기
slideup() : 슬라이드 효과 감추기
slidetoggle() : slidedown, slideup 번갈아 수행
fadein(): 서서히 보이기
fadeOut() : 서서히 감추기
fadeToggle() : fadein, fadeout 번갈아 수행
B. effect 메서드 4가지 형태
1. $(선택자).method()
2. $(선택자).method(speed) : slow, normal, fast, 숫자(ms)
3. $(선택자).method(speed, 콜백함수) : 효과가 수행되는 동안 수행할
함수(callback 함수)를 지정, 함수수행 결과가 리턴
4. $(선택자).method(speed, easing, 콜백함수) : easing 애니메이션효과 적용
*/
$(function(){
$('button').click(()=>{
$('.page').slideToggle(1000,() => alert('toggle'));
})
})
</script>
</head>
<body>
<button>jQuery Effect - toggle</button>
<div class="page">
<h1>
<p>dd</p>
</h1>
</div>
</body>
<style>
*{
margin:0;
padding:0;
}
#box{
background: mediumaquamarine;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script>
/* jQuery Animation
A. 매서드 형태
1. $().animate(object)
2. $().animate(object, speed)
3. $().animate(object, speed, easing)
4. $().animate(object, speed, easing, callback 함수)
B. animation의 형태
opacity, height, top, width, left, margin right, padding bottom
C. 정지메서드
1. $().stop()
2. $().stop(clearQueue)
3. $().stop(clearQueue, goToEnd)
*/
$(function(){
$('button').click(()=>{
$('div').animate({
left: '250px',
opacity: '0.5',
height: '+=150px',
width: '+=150px',
height: 'toggle',
width: 'toggle',
})
})
//anaimation 효과는 누적처리
$('#box').click(function(){
$(this).animate({height:'300px', opacity:'0.5'}, 'slow')
$(this).animate({width:'300px', opacity:'0.5'}, 'slow')
$(this).animate({width:'100px', opacity:'0.5'}, 'slow')
$(this).animate({width:'100px', opacity:'0.5'}, 'slow')
})
})
</script>
</head>
<body>
<button>스타트 애니</button>
<div id="box"></div>
</body>
'일 > javascript' 카테고리의 다른 글
| js14_jQuery_ui (0) | 2023.06.19 |
|---|---|
| js12_events (0) | 2023.06.01 |
| js11_Query (0) | 2023.06.01 |
| js10_exception (0) | 2023.06.01 |
| js09_builtin (0) | 2023.06.01 |