jQuery 공작소 : 유체이탈 하시는 분들

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 120px;
    }
    .css_test .new_img { /* 새로 추가되는 이미지 */
        position : absolute;
    }
</style>
<br><br><br><br><br>
얼굴을 클릭해 보세요.<br><br>
<div class="css_test">
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(el){
        var o = $(el).offset(); // 클릭한 이미지를 대상으로 offset !
        var img = $('.css_test').append('<img class="new_img" src="//superkts.com/img/css/huk.gif">'); // 이미지 하나 추가

        // 이미지를 클릭하면 새로운 이미지를 하나 추가합니다. - append 메소드 사용
        // 새로 추가된 이미지를 클릭한 이미지와 동일한 위치로 설정 후 애니메이션 합니다.
        // 그럼 해당 위치에서 새로추가된 이미지가 위로 올라가게 되죠.
        $( '.css_test img:last' ).css( { top : o.top, left : o.left } ).animate( { top : '-=300', opacity : 0 }, 1000, function(){
            $(this).remove();
        });
    }
</script>

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 200px;
    }
    .css_test .new_img { /* 새로 추가되는 이미지 */
        position : absolute;
    }
</style>
<br><br><br><br><br>
얼굴을 클릭해 보세요. 좌우 번갈아 가며 빠르게 !!<br><br>
<div class="css_test">
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
</div>
<br><br><br>
<script type="text/javascript">
    function j_test(el){
        var o = $(el).offset(); // 클릭한 이미지를 대상으로 offset !
        var img = $('.css_test').append('<img class="new_img" src="//superkts.com/img/huk2.gif">'); // 이미지 하나 추가

        // 이미지를 클릭하면 표정이 바뀐 이미지를 새로 추가합니다. - append 메소드 사용
        // 새로 추가된 이미지를 클릭한 이미지와 동일한 위치로 설정 후 애니메이션 합니다.
        // 그럼 해당 위치에서 새로추가된 이미지가 위로 올라가게 되죠.
        $( '.css_test img:last' ).css( { top : o.top, left : o.left } ).animate( { top : '-=500', opacity : 0 }, 1000, function(){
            $(this).remove();
        });
    }
</script>

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        width : 100px;
    }
</style>
<br><br><br><br><br>
얼굴 연타 !!!<br><br>
<div class="css_test">
    <img src="//superkts.com/img/css/huk.gif" onclick="j_test(this)" />
</div>
<br><br>
BGM : 둠칫 둠칫 ♬ ~
<br><br><br>
<script type="text/javascript">
    function j_test(el){
        var pos = $(el).offset(); // 클릭한 이미지를 대상으로 offset !

        // clone 메서드로 이미지 복제후 부모요소 내에 추가하고 애니메이션 종료후 삭제
        $(el).clone().appendTo($(el).parent()).css({
            position:'absolute',
            left:pos.left,
            top:pos.top
        }).animate({
            left:'-=2500',
            top:'-=2500',
            width:'+=5000',
            height:'+=5000'
        }, 2000, 'easeInQuint', function(){
            $(this).remove();
        });

    }
</script>