04_animate

animate의 문법

선택자.stop().anmiate({속성:'값', 속성:'값'}, 시간, 이징, 다른할일);

$(function(){

/* 첫번재*****버튼을 누르면 li가 나오게 한다.
$('button').click(function(){
$('.menu').css({display:'block'});
});
*/

//두번째*******
//2. button을 클릭하면animate()메서드를 사용하여 div를 오른쪽으로 250px 이동하세요
/*animate문법
선택자.animate({속성:값, 속성:값}, 시간, 이징, 다른할일);*/

/*2
$('button').click(function(){
$('div').animate({left:'250px'},5000,'easeInOutElastic');
});
2번 끝*/

 

//세번째*******
/*높이를 500px로 변경하시오-->0.5있다가 원래대로 돌아오기
3.animate문법
선택자.animate({속성:값, 속성:값}, 시간, 이징, 다른할일);
*/

//3번
/*
$('div').animate({height:'500px'},function(){
$(this).animate({height:'100px'}, 500);
});
*/

//3번 div에 마우스가 들어오면 색상 바꾸기
$('div').mouseover(function(){
//blue로 바꾸고 0.5s, animate
//animate는 수치 바꾸는것만 가능하다. 그래서 fontsize수차와 opacity만 가능 
//이번에는 색을 바꾸는 거니 queryui가 로드되어있어야한다.
// $(this).animate({backgroundColor:'blue'},500);
/*앞에 stop() 즉 하던일을 멈추고가 없으면 마우스를 위아래 움직였을때
이미 마우스가 div밖에 나와있는데 계속 색이 바뀌고 있다.
그래서 항상 animate시작할때 앞에 하던일을 멈추고~인 stop()을 써줘야한다.
이해가 안된다면 아래 stop을 지우고 마우스를 계속 위아래 움직이고 빠져나와보자.*/
$(this).stop().animate({backgroundColor:'blue'},500);
})
.mouseout(function(){
//green, 0.5s
// $(this).animate({backgroundColor:'green'},500);
$(this).stop().animate({backgroundColor:'green'},500);
});
});