mouseover시 위치변동

//html에서보면 body위에 script가 있다  body내용들을 다 읽으면 할일
$(function(){
var $duration = 300,
$button = $('#buttons2 button');

//button들의 높이 -40, 0 , 40, 80, 120...
//버튼들 마다 할일을 자바스크립트 문법으로 작성
//i가 0 = -40, i가 1 = 0, i가2 = 40


/* 자바스크립트로 해보기
var $buttons = 자바스크립트 button선택
var $buttons = document.getElementsByTagName('button');
console.log($buttons);
//대괄호 안에 숫자 일일히 바꾸기힘드니 0,1..로 한번에 바꾸기 위해 반복문, 
// $buttons[0].style.top = -40;
// $buttons[1].style.top = 0;

for(var i=0; i<=$buttons.length; i++){
$buttons[i].style.top = i*40 - 40 + 'px';
}
*/

/* 제이쿼리로 해보기
1. 버튼들마다 할일
*/
$button.each(function(idx){
console.log(idx);
//선택자.css({속성:값, 속성:값});
//jquery에서 each함수는 this로 받으면 button들을 순차적으로 물고들어온다.

// $(this).css({top: idx*40 - 40 + 'p})
// 변수없이 저렇게 써도 되고 변수를 지정해줘도 된다. 아래

var newTop = idx *40 - 40 +'px';
$(this).css({top:newTop});
})
//정렬은 끝났고 마우스를 올렸을때 background변경,
//초록이미지 첫번재 이미지가 안보이고, 두번째 이미지가 보이게
//첫번째$button의 첫번째 img 할일 css $button img:nth-first

.mouseover(function(){
$(this).stop().animate({backgroundColor:'yellow', color:'#000'},$duration);
$(this).find('img:first-child').stop().animate({opacity:0},$duration);
$(this).find('img:nth-child(2)').stop().animate({opacity:1},$duration);
})
.mouseout(function(){
$(this).stop().animate({backgroundColor:'#fff', color:'#01b169'},$duration);

$(this).find('img:first-child').stop().animate({opacity:1},$duration);
$(this).find('img:nth-child(2)').stop().animate({opacity:0},$duration);
});

});


/*내가쓴거 틀림

-버튼들마다 할일이 빠져있고, img 빠져있음. 풀어서쓰는 연습필요

$button.filter(':nth-child(0)').mouseouver(function(){
$(this).find('img:nth-child(0)').css({display:'none'});
$(this).find('img:nth-child(1)').css({display:'block'});
});

css참고

/* #button2 */

#buttons2 {
    background-color: #01b169;
    height: 340px;
}

#buttons2 .inner {
    position: relative;
    width: 976px;
    margin: 0 auto;
}

#buttons2 button {
    display: block;
    position: absolute;
    width: 224px;
    height: 224px;
    overflow: hidden;
    padding: 0 0 35px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #01b169;
    background-color: #fff;
    border: none;
    border-radius: 112px;
}
#buttons2 button:nth-child(1) {
    left: 10px;
}
#buttons2 button:nth-child(2) {
    left: 254px;
}
#buttons2 button:nth-child(3) {
    left: 498px;
}
#buttons2 button:nth-child(4) {
    left: 742px;
}

#buttons2 button img:first-child {
    position: absolute;  //첫번째 이미지 보이고 
}
#buttons2 button img:nth-child(2) {
    opacity: 0;  //hover시 첫번째 이미지 안보이고 두번째 이미지 보이게.
}