6_image클릭시 each반복문 / for반복문

//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);
// $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';
}
*/

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

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

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);
});

});