새키우기

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

새키우기 입니다. 클릭하면 새가 커지죠.
정직한 제목. 정직한 내용.

+_+
예제 1
애니메이션 메서드와 이징효과를 이용한 간단한 예제입니다
보기
새를 눌러보세요!

소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        height : 150px;
        padding : 5px;
        text-align : center;
        width : 100%;
        
    }
    .css_test img {
        cursor : pointer;
        vertical-align : bottom;
    }
</style>

새를 눌러보세요!<br><br>

<table class="css_test" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="bottom">
            <img src="http://superkts.com/img/bird.gif" />
            <img src="http://superkts.com/img/bird.gif" />
            <img src="http://superkts.com/img/bird.gif" />
            <img src="http://superkts.com/img/bird.gif" />
            <img src="http://superkts.com/img/bird.gif" />
            <img src="http://superkts.com/img/bird.gif" />
            <img src="http://superkts.com/img/bird.gif" />
            <img src="http://superkts.com/img/bird.gif" />
        </td>
    </tr>
</table>

<button class="mt10" type="button" onclick="$('.css_test img').animate({height:'37'}, 500, 'easeInOutBack')">작아지게 하기</button>

<script type="text/javascript">

    $('.css_test img').bind('click', function(){
        $(this).animate({height:'120'}, 250, 'easeInOutBack');
    });

</script>
관련 CSS
jQuery