jQuery 이미지 애니매이션 효과 주기

jQuery 이미지 애니매이션 효과 주기

fadeIn, fadeOut 효과를 줘보자.

<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>

<script>

  $(document).ready(function(){

    var mainImg = $('#imgLayer1 img');

    var subImg = $('#imgLayer2 img');

    subImg.mouseover(function(){

      var iSrc = this.src;

      mainImg.fadeOut(2000,function(){$(this).attr('src',iSrc);$(this).fadeIn(3000);});

    });

  });

</script>

<div id="imgLayer1" align="center">

<img src="test1.png" width="200" />

</div>

<div id="imgLayer2" align="center">

<img src="test1.png" width="100" />

<img src="test2.png" width="100" />

</div>

위의 이미지 중에서 아래 두개의 이미지에 마우스를 가져가 보자.