show()
: 선택요소 보이기hide()
: 선택요소 감추기 toggle()
: 선택요소 보이기 / 감추기 slideDown()
: 선택요소 서서히 보이기 slideUp()
: 선택요소 서서히 감추기 slideToggle()
: 선택요소 서서히 보이기 / 감추기 fadeIn()
: 선택요소 페이드로 나타나게 하기 fadeOut()
: 선택요소 페이드로 사라지게 하기fadeToggle()
: 선택요소 페이드로 나타내기 / 사라지게 하기script/custom.js
<script>
$('.btn').click(function() {
$('div').slideDown();
})
html 내에 있는'.btn'이라는 클래스를 가지고 있는 요소를 클릭하면,
'div'태그를 서서히 보여줘라.
</script>
이펙트 자체를 사용하기 복잡하고 그런것은 아니다.
그냥 jQuery 표현 규칙만 잘 알고 있으면 쉽다. (그럴려고 jQuery가 존재하는 거긴 하지만..)
위에 열거한 보이기 / 감추기 이펙트 뒤에 붙어있는 괄호 ()
필수사항은 아니지만, 이 괄호안에 이펙트의 속도를 지정 가능하다.
script/custom.js
<script>
$('.btn').click(function() {
$('div').fadeIn(3000);
})
html 내에 있는'.btn'이라는 클래스를 가지고 있는 요소를 클릭하면,
'div'태그를 3000밀리세컨드(=3초)에 걸쳐 서서히 나타나게 해랴.
</script>