일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- mysql
- 자바스크립트
- KB증권
- 티스토리
- centos
- ConoHa
- php
- 보르비스초월
- 킹북이초월
- Rocky
- 라즈베리파이2
- 아파치
- iptime
- jQuery
- 램가스초월
- OpenWrt
- PHP-FPM
- 리눅스
- 스톤에이지
- KB국민카드
- 가상서버호스팅
- 소비전력
- 복현오거리
- proxmox
- 알뜰폰
- SKT
- 알리익스프레스
- Apache
- 윈도우10
- 시놀로지
- Today
- Total
맛집 여행 캠핑 일상 생활
jQuery 이미지 애니매이션 효과 주기 본문
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
반응형
'JAVASCRIPT' 카테고리의 다른 글
jQuery iframe 부모 페이지 scrollTop 컨트롤하기 (0) | 2016.05.09 |
---|---|
jQuery Element가 배열인 경우 처리 (0) | 2016.05.02 |
CKEDITOR 폰트 추가 및 사이즈 추가 (0) | 2016.03.30 |
자바스크립트 jQuery 로 헤더에 메타 태그 추가하는 방법 (0) | 2016.03.24 |
자바스크립트 함수 존재 여부 확인 하기 (0) | 2016.03.21 |
Trackback : | Comments :