animate_find / filter

//html에서 body시작하기전에 script가 있으니 document가 준비되면 할일 이라고 해야하니.

js첫줄에 $(function(){});
 
$(function(){
var $duration = 300,
$image = $('#images p');

//p태그에 마우스를 올리면 첫번째 캡션이 보여야하고, 안보이던 span태그도 보여야한다. animate메서드
/*-**** 첫번째 예시*******
공백이 있으면 = find
공백이 없으면 = filter
#images p span{ } --> $image.find('span')
#images p.strong{ } --> $image.filter('strong');
*/
$image.filter(':nth-child(1)').mouseover(function(){
/*
$(this).stop().animate({opacity : '1'},300); 이렇게쓰면안됨 

this는 지금 p를의미함. 움직일게 p태그가 아니라 그 자식요소인 strong과 span을 움직여야 하는거임.

그럼 그 자식요소인것을 어떻게 써줘야할까?..find / filter의 의미파악하기
*/
/*
$(this).find('span').animate({opacity:1},$duration);
$(this).find('strong').animate({opacity:1},$duration);
css에서도 span,strong같이 쓸 수 있으므로 여기서도 한줄로 줄일수 있다.
*/

$(this).find('span,strong').stop().animate({opacity:1},$duration);
})
.mouseout(function(){
$(this).find('span,strong').stop().animate({opacity:0},$duration);
});

/* *****두번째 예시*****
왼쪽에서 오른쪽으로.
두번째 p태그 접근하는 방법은 css에서 보면
#images p:nth-child(2)
$image.filter(':nth-child(2)')
*/
$image.filter(':nth-child(2)').mouseover(function(){
$(this).find('span').stop().animate({opacity:1},$duration);
$(this).find('strong').stop().animate({opacity:1,left:'0%'},$duration);
})
.mouseout(function(){
$(this).find('span').stop().animate({opacity:0},$duration);
$(this).find('strong').stop().animate({opacity:0,left:'-200%'},$duration);
});

/***세번째 예시**/
/*
이미지가 위로 올라가고. strong 아래에서 위로 올라온다.
세번째 p태그는 이렇게 선택할수있다.
#images p:nth-child(3) ----> $image.filter(':nth-child(3)')
*/
$image.filter(':nth-child(3)').mouseover(function(){
$(this).find('span').stop().animate({opacity:1},$duration);
$(this).find('strong').stop().animate({opacity:1, bottom:0},$duration);
$(this).find('img').stop().animate({top:'-40px'},$duration);

})
.mouseout(function(){
$(this).find('span').stop().animate({opacity:0},$duration);
$(this).find('strong').stop().animate({opacity:0, bottom:'-80px'},$duration);
$(this).find('img').stop().animate({top:'0'},$duration);
});

});