기본 효과 > JQUERY

• 목록

$(selector).show(speed, easing, callback);

// speed : 속도를 조절 해주는 매개변수로 "slow" , "fast" , milliseconds(1000분의 1초)를 적용할 수 있다.

// easing : 움직임 효과로 "swing" , "linear"를 적용할수 있다.

swing : 시작 / 끝에서는 느리게 움직이지만 중간에서는 빨라진다.

linear : 일정한 속도로 움직인다.

// callback : show()메서드가 종료된 후 실행되는 함수이다.

// show(), hide(), toggle() 메서드는 매개변수를 생략할 경우 애니메이션이 적용되지 않고, 단순한 show, hide 기능을 한다.

ex)

<style>

* {

margin: 5px;

}

.box {

width: 200px;

height: 50px;

border: 2px solid #333;

display: none;

}

</style>

<script>

$(document).ready(function() {

//기본

$("#m1 button:eq(0)").click(function() {

$("#m1 .box").show();

});

$("#m1 button:eq(1)").click(function() {

$("#m1 .box").hide();

});

$("#m1 button:eq(2)").click(function() {

$("#m1 .box").toggle("fast", "swing");

});

//slide

$("#m2 button:eq(0)").click(function() {

$("#m2 .box").slideDown("fast", "swing");

});

$("#m2 button:eq(1)").click(function() {

$("#m2 .box").slideUp("slow", "swing");

});

$("#m2 button:eq(2)").click(function() {

$("#m2 .box").slideToggle(250, "linear");

});

//fade

$("#m3 button:eq(0)").click(function() {

$("#m3 .box").fadeIn("fast", "swing", function() {

$(this).text("jQuery");

});

});

$("#m3 button:eq(1)").click(function() {

$("#m3 .box").fadeOut("fast", "swing", function() {

$(this).text("내용3");

});

});

$("#m3 button:eq(2)").click(function() {

$("#m3 .box").fadeToggle("fast", "swing", function() {

if($(this).css("display") == "none"){

$(this).text("내용3");

}else {

$(this).text("jQuery");

}

});

});

});

</script>

<div id="m1">

<button>show</button>

<button>hide</button>

<button>toggle</button>

<div class="box">내용1</div>

</div>

<div id="m2">

<button>slideDown</button>

<button>slideUp</button>

<button>slideToggle</button>

<div class="box">내용2</div>

</div>

<div id="m3">

<button>fadeIn</button>

<button>fadeOut</button>

<button>fadeToggle</button>

<div class="box">내용3</div>

</div>

[실행결과]