애니메이션
fadeIn, fadeOut
페이드인, 페이드아웃 애니메이션
<script>
$(document).ready(function(){
$("#btn_show").bind("click", function(){
$("#img_1").fadeIn(2000, "easeInCubic")
});
$("#btn_hide").bind("click", function(){
$("#img_1").fadeOut(2000, "easeInCubic")
});
});
</script>
fadeToggle
페이드인/아웃 토글
<script>
$(document).ready(function(){
$("#btn_show").bind("click", function(){
$("#img_1").fadeToggle(2000, "easeInCubic")
});
});
</script>
fadeTo
페이드아웃이 전체에 적용되는 반면 fadeTo는 특정 범위만 적용됨
<script>
$(document).ready(function(){
$("#btn_show").bind("click", function(){
$("#img_1").fadeTo(2000, 0.5, "easeInCubic")
});
});
</script>
*페이드아웃은 아예 완전히 없어지지만 페이드투(0으로 줬을때)는 해당 공간은 여전히 남아있음
animate
사용자의 의도대로 여러 애니메이션을 한번에 적용할 수 있음
<script>
window.onload=function(){
$("#btn_Start").bind("click", function(){
$("#img_1").css("opacity",1)
$("#img_1").animate({opacity:0, left:300},2000,"easeInCubic")
});
}
</script>
*stop
기존의 애니메이션을 잠시 멈추게 함 다른 애니메이션을 바로 적용하게 함
<script>
$(document).ready(function(){
$("#btn_show").bind("click",function(){
$("#img_1").stop();
$("#img_1").animate({opacity:1},3000,"easeOutCubic");
});
$("#btn_hide").bind("click",function(){
$("#img_1").stop();
$("#img_1").animate({opacity:0},3000,"easeOutCubic");
});
});
</script>
:not(:animated)
가상요소, 해당 개체는 애니메이션되지 않게 함 사용자가 의도한대로 애니메이션 적용할 때 사용
<script type="text/javascript">
$(function(){
$(document).ready(function(){
$("#img1").bind("click",function(){
$("p:not(:animated)").animate({marginLeft:"-220px"},3000,"easeInQuad")
});
$("#img2").bind("click",function(){
$("p:not(:animated)").animate({marginLeft:"0px"},3000,"easeInQuad")
});
});
});