$(selector).hide(speed, callback); : 해당 요소를 사라지게 하는 기능( display : none )
$(selector).show(speed, callback); : 해당 요소를 보이게 하는 기능( display : block )
$(selector).toggle(speed, easing, callback); : 두 기능을 번갈아 가며 실행
속성
Speed : milliseconds, slow, fast
Easing : swing(가속), linear(평균)
Callback : 효과가 끝나고 실행할 기능
</head>
<body>
<div>메뉴1</div>
<ul>
<li>LIST 01</li>
<li>LIST 02</li>
<li>LIST 03</li>
<li>LIST 04</li>
<li>LIST 05</li>
</ul>
<button id="toggle">OFF</button>
<p>>LIST 01</p>
<p>>LIST 02</p>
<p>>LIST 03</p>
<p>>LIST 04</p>
<p>>LIST 05</p>
</body>
<script>
$('ul').hide(); //display를 none으로 설정
$('div').hover(function(){
$('ul').show();
},function(){
$('ul').hide('fast'); //fast|slow 로 속도 조절
});
$('#toggle').click(function(){
//speed, easing, callback
$('p').toggle('slow',function(){
//callback 함수는 애니메이션이 모두 종료되고 나서 실행
//alert('애니메이션 끝');
var tog = $('#toggle').text();
if(tog == 'OFF'){
$('#toggle').text('ON');
}else{
$('#toggle').text('OFF');
}
});
});
Fade effect
$(selector).fadeIn(speed, callback); : 서서히 나타나는 효과
$(selector).fadeOut(speed, callback); : 서서히 사라지는 효과
$(selector).fadeToggle(speed, callback); : 위 두 개의 효과를 토글
$(selector).fadeTo(speed, opacity, callback); : opacity 조정
속성
Speed : milliseconds, slow, fast
Opacity : 도달할 투명도 수치
Callback : 효과가 끝나고 실행할 기능
<body>
<button id="viz">fadeIn</button>
<button id="inviz">fadeOut</button>
<button id="toggle">ON</button>
<div></div>
<br/>
<img src="../img/chrome.png" width="100px"/>
</body>
<script>
$('#viz').on('click',function(){
//speed, callback
//show() : 크기를 조절하면서 투명도를 조절
//fadeIn() : 요소를 만들고 이후 투명도를 조절
$('div').fadeIn('slow',vizCheck);
});
var vision; //div의 display 상태 저장
function vizCheck(){
vision = $('div').css('display');
console.log('display : ',vision);
if(vision == 'block'){
$('#toggle').text('OFF');
}else{
$('#toggle').text('ON');
}
}
$('#inviz').on('click',function(){
$('div').fadeOut(3000,vizCheck);
});
$('#toggle').on('click',function(){
$('div').fadeToggle('fast',vizCheck);
});
$('img').hover(function(){
//fadeTo(속도, 투명도)
$(this).fadeTo('slow',0.2)
},function(){
$(this).fadeTo('slow',1);
});
</script>
Slide
$(selector).slideUp(speed, callback); : 요소가 아래서 위로 크기가 작아지며 사라지는 효과
$(selector).slideDown(speed, callback); : 요소가 위에서 아래로 크기가 커지며 나타나는 효과
$(selector).slideToggle(speed, callback); : 위 두 개의 효과를 토글
속성
Speed : milliseconds, slow, fast
Callback : 효과가 끝나고 실행할 기능
<body>
<div id="flip">MENU 1</div>
<div class="panel" id="p1">SUB MENU</div>
<div id="flip2">MENU 2</div>
<div class="panel" id="p2">SUB MENU</div>
</body>
<script>
/*
$('#flip').hover(function(){
//slideDown(속도,콜백함수)
$(this).next().slideDown('slow');
console.log('in');
},function(){
//slideUp(속도,콜백함수)
$('#p1').slideUp();
console.log('slow');
});
*/
//문제점 : 슬라이드업이 될 때 마우스가 들어오면 다시 슬라이드 다운 실행
//해결책 : 마우스가 나갔다 들어왔을 때 슬라이드 다운이 실행 X
//1.마우스엔터 -> 슬라이드 다운
$('#flip').on('mouseenter',down);
//2.마우스아웃 -> 슬라이드 업 / 마우스엔터 off -> 애니메이션이 끝날 때 마우스엔터 on
$('#flip').on('mouseleave',function(){
$(this).off('mouseenter');
$(this).next().slideUp('slow',function(){
$('#flip').on('mouseenter',down);
});
});
function down(){
$(this).next().slideDown('slow');
}
// 1. 클릭 -> 슬라이드 다운 -> 클릭 -> 슬라이드 업
$('#flip2').on('click',function(){
$(this).next().slideToggle('slow');
});
</script>
Animate
$(selector).animate({params}, speed, easing, callback); - Params : css에서 정의 할 수 있는 속성들(애니메이션 결과로 나타날 형태를 지정) - Speed : 애니메이션이 시작해서 끝날 때 까지 걸릴 시간 - Callback : 애니메이션 종료 후 일어날 기능
