<style type="text/css">
.css_test {
border : 5px solid gray;
border-radius : 5px;
padding : 5px;
}
.css_test img {
position : relative; /* 이미지에 애니메이션을 적용하기 위함 */
}
</style>
개와 고양이를 찾아봅시다.<br><br>
<button type="button"
onclick="j_test()">눌러보세용</button>
<div class="css_test">
<img src="//superkts.com/img/css/bird20.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
<img src="//superkts.com/img/css/cat051.gif" />
<img src="//superkts.com/img/css/huk.gif" />
<img src="//superkts.com/img/css/cat051.gif" />
<img src="//superkts.com/img/css/dog061.gif" />
<img src="//superkts.com/img/css/huk.gif" />
</div>
<script type="text/javascript">
function j_test(){
$('.css_test img')
.filter('[src*=dog]')
.fadeOut(1000, function(){
$(this).fadeIn(1000);
})
.end()
.filter('[src*=cat]:not(:animated)')
.animate({top:-50}, 200, function(){
$(this).animate({top:0}, 300);
})
}
</script>