jQuery 공작소 : 공포주의! 귀신과의 제이쿼리

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

약간 무서울수 있으니 주의하세요 !!

※ 깜놀 주의

예제 1
귀신을 소환합니다 (검은색 부분을 누르세요)
보기
소스
<style type="text/css">
    .css_test {
        background-color : black;
        background-image : url('//superkts.com/img/css/ghost.gif');
        background-position : 50% 50%;
        background-repeat : no-repeat;
        background-size : 0;
        border-radius : 30px;
        cursor : pointer;
        height : 700px;
    }
    .css_test.red_on {
        box-shadow : 0 0 50px red inset, 0 0 15px red inset;
    }
</style>

<script type="text/javascript">
    function j_test(){
        // :not(:animated) 셀렉터를 사용하여 중복실행 방지
        $( '.css_test:not(:animated)' ).addClass( 'red_on' ).animate({ 'background-size' : '+=100%' }, 600, function(){
            // 귀신 돌려보내기 (배경이미지 사이즈 축소)
            $( '.css_test' ).animate({ 'background-size' : '-=100%' }, 10000, function(){
                $(this).removeClass( 'red_on' ); // 빨간 테두리 없애기
            });
        });
    }
</script>

<div class="css_test" onclick="j_test()"></div>
관련 CSS
jQuery
- 간단한 애니메이션 효과와 CSS를 사용해서 만들어 본 예제입니다.
- http://ktsmemo.cafe24.com/s/jquery/33 여기에 만드는 과정을 담은 예제가 있습니다. ^^