jQuery 공작소 : .find()

<style type="text/css">
    .css_test {
        border : 5px solid gray;
        border-radius : 5px;
        padding : 5px;
        position : relative;
    }
    .css_test img {
        position : relative; /* 애니메이션 효과 적용을 위해 적용 */
    }
</style>

클릭한 동물을 점프시켜 봅시다!<br><br>

<button type="button" onclick="j_test('닭')">닭</button>
<button type="button" onclick="j_test('고양이')">고양이</button>
<button type="button" onclick="j_test('개')">개</button>
<button type="button" onclick="j_test('새')">새</button>

<div class="css_test">
    <img name="닭" src="//superkts.com/img/css/bird17.gif">
    <img name="고양이" src="//superkts.com/img/css/cat051.gif">
    <img name="개" src="//superkts.com/img/css/dog061.gif">
    <img name="닭" src="//superkts.com/img/css/bird17.gif">
    <img name="새" src="//superkts.com/img/css/bird30.gif">
    <img name="개" src="//superkts.com/img/css/dog060.gif">
    <img name="고양이" src="//superkts.com/img/css/cat051.gif">
    <img name="개" src="//superkts.com/img/css/dog061.gif">
    <img name="고양이" src="//superkts.com/img/css/cat051.gif">
</div>

<script type="text/javascript">

    function j_test(v){
        // 보기 편하게 여러줄로 코딩
        $( '.css_test' )
        .find( '[name=' + v + ']:not(:animated)' ) // 이름으로 동물을 찾고 애니메이션 되지 않는것만 찾기
        .animate({top:-100}, 200, function(){ // 점프 상승
            $(this).animate({top:0}, 200, function(){ // 점프 하강
                $('.css_test').animate({top:'+=2'}, 10, function(){ // 테두리 하강 (점프하강한 동물의 무게로 인해 ..)
                    $('.css_test').animate({top:'-=2'}, 10) // 테두리 상습 (원복)
                })
            });
        })
    }

</script>