jQuery 공작소 : 물컹물컹 이미지

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        border-radius : 0;
        margin-bottom : 10px;
        cursor : pointer;
    }
</style>

<div class="css_test">
    이미지를 눌러보세요<br><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/2341424F54D735170D" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/2338433D552F50A40F" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/2523EC4F54D7351637" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/23285B4D55AC84AD33" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/223D2D4C550B9B3B0D" /><br>
</div>

<script type="text/javascript">
    function j_test_click(o){
        $(o).stop().animate({ 'border-radius':100 }, 1000, 'easeOutElastic' );
    }

    function j_test_mout(o){
        $(o).stop().animate({'border-radius':1});
    }

    $( '.css_test img' ).bind( 'click', function(){
        j_test_click(this);
    }).bind( 'mouseout', function(){
        j_test_mout(this);
    });
</script>