물컹물컹 이미지

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

제이쿼리UI 와 animate 메서드로 만들어본 간단한 예제입니다.
새로고침하면 이미지가 바뀝니다 ^^

예제 1
이미지를 눌러보세요
보기
이미지를 눌러보세요






소스
<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="http://cfile5.uf.tistory.com/image/2132CA4F54D7351720C017" /><br>
    <img src="http://cfile9.uf.tistory.com/image/234BC24D55AC84AA1CD410" /><br>
    <img src="http://cfile29.uf.tistory.com/image/21714438550B923B421996" /><br>
    <img src="http://cfile27.uf.tistory.com/image/276CD538550B923A07BF72" /><br>
    <img src="http://cfile2.uf.tistory.com/image/22063B4854D7351334D218" /><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>
관련 CSS
예제 2
관련 예제
jQuery
easing(이징) 효과 모음 - 이미지의 물컹거리는 움직임에 사용된 이징효과 예제
.animate() - 애니메이션 효과 메서드
.bind() - 동적이벤트 생성 (적절히 사용시 코드 간소화)