jQuery 한 그림 에서 다른 그림 으로 의 구현 코드

jQuery 는 한 장의 그림 을 다른 그림 으로 페이드아웃 합 니 다.예 를 들 어 아래 html:
 
<div class="fade">
<img src="1.jpg" />
</div>
먼저 div 의 크기 와 그림 크기 가 같 도록 확보 합 니 다.이 div 는 다른 배경 그림 이 있 습 니 다.다음 과 같 습 니 다.css 코드:
 
.fade
{
background-image:url('images/2.jpg');
width:300px;
height:225px;
}
jQuery 코드 는 다음 과 같 습 니 다.
 
$(document).ready(function () {
$(".fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function () {
$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500);
});
});
완전한 실현 코드:
 
<div class="fade"><img src="1.jpg" /></div>
<style type="text/css">
.fade
{
background-image:url('2.jpg');
width:300px;
height:225px;
margin:0 auto 15px;
}</style>
<script type="text/javascript">
$(document).ready(function () {
$(".fade").hover(function () {
$(this).find("img").stop(true, true).animate({ opacity: 0 }, 500);
}, function () {
$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500);
});
});
</script>
작성 자:jQuery 학습 코드

좋은 웹페이지 즐겨찾기