jQuery5 --이펙트(effect)

A> 

hide()  : 숨긴다.

hide(속도, 기능) :  속도 만큼의 속도로 숨겨짐

show() : 보이게 한다.

show(속도,기능) :속도만큼의 속도로 보여줌, 

 

B>

fadeIn(속도) : 서서히 보이게 한다.

fadeOut(속도) : 서서히 없어지게 한다.

fadeToggle(속도) : 안보이면 보이게, 보이면 안보이게 한다. 서서히

fadeTo( 속도,투명도): 투명도까지 변화시킨다.

 

C>

slideDown(속도): 슬라이드 되어 내려간다.

slidUp(속도): 슬라이드 되어 올라간다.

slideToggle(속도) : 슬라이드 되 있으면 올리고, 올려져 있으면 내린다.

 

D>

animate({방향: 거리}) -- 예시

//1. 왼쪽으로 250px 이동$("button").click(function(){
  $("div").animate({left: '250px'});
}); 
//2. 왼쪽으로 250px , 투명하게 , 높이 넓이 150으로
$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
}); 
3.왼쪽으로 250 , 넓이 높이 150 추가하기
$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
}); 
//4.//height 가 있으면 height 없어지게, //height 가 없으면 height 를 준다., 
$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
}); 
//5.//4번의 애니메이트 움직임
$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 
//왼쪽으로 100 이동 후 글자 크기 3em 으로
$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
});