jQuery 공작소 : :animated

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

:animated 셀렉터는 animate 되는 요소를 찾습니다.
※ 메서드가 아닌 셀렉터 입니다.

예제 1
날아간닭 예제 ! (움직이는 닭을 날려버립니다)
보기
소스
<style type="text/css">
    .css_test {
        height : 220px;
        text-align : center;
    }
    .css_test img {
        position : relative;
        z-index : 10;
    }
</style>

<div class="css_test">
    <img src="//superkts.com/img/css/bird17.gif" />
    <img src="//superkts.com/img/css/bird17.gif" />
    <img src="//superkts.com/img/css/bird17.gif" />
    <img src="//superkts.com/img/css/bird17.gif" />
</div>

<button type="button" onclick="j_test_fly_up()">다음 닭 !</button>

<script type="text/javascript">
    function j_test(){
        if($('.css_test img').size() == 0){ // 이미지가 하나도 없으면 "없 닭" 표시
            $('.css_test').html('이제 없 닭 !!<br><img src="//superkts.com/img/css/cat.gif">');
            return;
        }
        $('.css_test img:eq(0)').stop().animate({top:'-=100'}, 1000, function(){
            $('.css_test img:eq(0)').stop().animate({top:'+=100'}, 500, j_test); // 함수 계속 반복 실행
        });
    }
    j_test();

    function j_test_fly_up(){
        // 움직이는것 멈추고, 위로 -400px 움직인 후, 제거하고, 다시 j_test 함수 실행
        $( '.css_test img:animated' ).stop().animate( { top:'-=400', opacity:0 }, function(){
            $(this).remove();
            j_test();
        });
    }
</script>
관련 CSS
jQuery

- :animated 는 애니메이션이 적용되서 움직이는 요소를 셀렉트 합니다.
- 위 예제는 움직이는 닭을 찾아내서 날려버리고 다음 닭을 움직이게 합니다.

$( '.css_test  img:animated' )  -  css_test 클래스이미지움직이는것을 셀렉트

참고 메서드 : .animate()

jQuery 홈페이지 :animated API 문서 : http://api.jquery.com/animated-selector/