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/2604833354D74FB40E" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/2604833354D74FB40E" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/264E5438555ABF490A" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/21028950550B9B3E0B" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/264EA84C550B9B3B05" /><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>