JQuery : fadeIn / fadOut /fadeToggle 메소드 사용해보기

fadeIn / fadOut /fadeToggle

---

js

$('.show_btn').click(function(){
  $('.box').fadeIn()
})

$('.hide_btn').click(function(){
  $('.box').fadeOut()
})

$('.toggle_btn').click(function(){
  $('.box').fadeToggle()
})

 

✔ fadeIn () = 스르륵 나오게 하는효과

✔ fadeOut ( ) = 스르륵 사라지게 하는 효과

✔ fadeToggle ( ) = 처음 누르면 fadeIn 다시 누르면 fadOut 효과

 

 

효과를 빠르고 느리게 주고 싶다면? 

fast / slow 

$('.show_btn').click(function(){
  $('.box').fadeIn('fast')
})

$('.hide_btn').click(function(){
  $('.box').fadeOut('slow')
})

$('.toggle_btn').click(function(){
  $('.box').fadeToggle('fast')
})

 

메소드 ( ) 안에 괄호가 있는데 여기에 효과를 넣어주면 된다.

 

숫자를 넣어서 줘도 되는데 ' ' 따움표를 쓰지않고 넣은다.

 

500 은 0.5  초 5000은 5초