맛집 여행 캠핑 일상 생활

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

JAVASCRIPT

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

영은파더♥ 2016. 4. 28. 17:27
728x90

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>







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




728x90
반응형
Trackback : | Comments :