jQuery 淡出一個(gè)圖像到另一個(gè)圖像的實(shí)現(xiàn)代碼
更新時(shí)間：2013年06月12日 12:34:14 作者：
這篇文章主要介紹了jquery的hover事件實(shí)現(xiàn)兩個(gè)圖片的淡出切換效果，需要的朋友可以參考下
jQuery 淡出一張圖片到另一張圖片，例如有下邊的 html：
<div class="fade">
<img src="1.jpg" />
</div>
首先，確保 div 的大小和圖片大小一樣，這個(gè) div 有另一個(gè)背景圖，如下：
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);
});
});
完整實(shí)現(xiàn)代碼：
<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學(xué)習(xí)
復(fù)制代碼 代碼如下:
<div class="fade">
<img src="1.jpg" />
</div>
首先，確保 div 的大小和圖片大小一樣，這個(gè) div 有另一個(gè)背景圖，如下：
css代碼：
復(fù)制代碼 代碼如下:
.fade
{
background-image:url('images/2.jpg');
width:300px;
height:225px;
}
jQuery 代碼如下:
復(fù)制代碼 代碼如下:
$(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);
});
});
完整實(shí)現(xiàn)代碼：
復(fù)制代碼 代碼如下:
<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學(xué)習(xí)
您可能感興趣的文章:
- jquery實(shí)現(xiàn)圖片左右切換的方法
- jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
- jQuery的animate函數(shù)實(shí)現(xiàn)圖文切換動(dòng)畫(huà)效果
- jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能實(shí)例
- jquery圖片切換實(shí)例分析
- jquery仿百度經(jīng)驗(yàn)滑動(dòng)切換瀏覽效果
- 13 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件推薦
- jQuery實(shí)現(xiàn)的多屏圖像圖層切換效果實(shí)例
相關(guān)文章
這篇文章通過(guò)實(shí)例代碼給大家講解了jquery替換節(jié)點(diǎn)元素的操作方法及動(dòng)態(tài)頁(yè)面的實(shí)現(xiàn)代碼，非常不錯(cuò)，需要的朋友參考下吧2018-03-03
簡(jiǎn)單過(guò)濾選擇器：根據(jù)某類過(guò)濾規(guī)則進(jìn)行元素的匹配，書(shū)寫時(shí)都以冒號(hào)（：）開(kāi)頭；簡(jiǎn)單過(guò)濾選擇器是過(guò)濾選擇器中使用最廣泛的一種，感興趣的朋友可以參考下2013-04-04
這篇文章主要介紹了jQuery中scrollTop()方法用法,實(shí)例分析了scrollTop()方法的功能、定義及返回或設(shè)置匹配元素的滾動(dòng)條的垂直偏移量時(shí)的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery操作復(fù)選框checkbox的方法,實(shí)例匯總了jQuery針對(duì)checkbox進(jìn)行判斷與賦值的各種常用操作技巧,需要的朋友可以參考下2015-02-02
jQuery使用attr()方法同時(shí)設(shè)置多個(gè)屬性值用法實(shí)例
這篇文章主要介紹了jQuery使用attr()方法同時(shí)設(shè)置多個(gè)屬性值的用法,實(shí)例分析了jQuery中attr方法實(shí)現(xiàn)多個(gè)屬性設(shè)置的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)的記住帳號(hào)密碼功能完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的記住帳號(hào)密碼功能,結(jié)合完整實(shí)例形式分析了jQuery使用jquery.cookie.js插件記錄用戶信息相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
jquery動(dòng)態(tài)切換背景圖片的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了jquery動(dòng)態(tài)切換背景圖片的簡(jiǎn)單實(shí)現(xiàn)方法,涉及jQuery自定義函數(shù)結(jié)合時(shí)間函數(shù)動(dòng)態(tài)變換背景圖片的相關(guān)技巧,需要的朋友可以參考下2016-05-05
jQuery事件綁定on()與彈窗實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery事件綁定on()與彈窗實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-04-04
下面小編就為大家?guī)?lái)一篇jQuery菜單實(shí)例(全選,反選,取消)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
JQuery調(diào)用WebServices的方法和4個(gè)實(shí)例
你是不是經(jīng)常作這種開(kāi)發(fā)，前端用JS寫邏輯，后端用aspx或者ashx作服務(wù)？你是不是經(jīng)常在請(qǐng)求aspx的時(shí)候在查詢字符串中拼接諸如a.aspx?method=getDepartmetn¶m1=1¶m2=2的字符串？2014-05-05