jQuery 淡出一個圖像到另一個圖像的實現(xiàn)代碼
更新時間：2013年06月12日 12:34:14 作者：
這篇文章主要介紹了jquery的hover事件實現(xiàn)兩個圖片的淡出切換效果，需要的朋友可以參考下
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);
});
});
完整實現(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學習
復制代碼 代碼如下:
<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);
});
});
完整實現(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學習
相關(guān)文章
這篇文章通過實例代碼給大家講解了jquery替換節(jié)點元素的操作方法及動態(tài)頁面的實現(xiàn)代碼，非常不錯，需要的朋友參考下吧2018-03-03
簡單過濾選擇器：根據(jù)某類過濾規(guī)則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種，感興趣的朋友可以參考下2013-04-04
這篇文章主要介紹了jQuery中scrollTop()方法用法,實例分析了scrollTop()方法的功能、定義及返回或設(shè)置匹配元素的滾動條的垂直偏移量時的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery操作復選框checkbox的方法,實例匯總了jQuery針對checkbox進行判斷與賦值的各種常用操作技巧,需要的朋友可以參考下2015-02-02
jQuery使用attr()方法同時設(shè)置多個屬性值用法實例
這篇文章主要介紹了jQuery使用attr()方法同時設(shè)置多個屬性值的用法,實例分析了jQuery中attr方法實現(xiàn)多個屬性設(shè)置的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery實現(xiàn)的記住帳號密碼功能,結(jié)合完整實例形式分析了jQuery使用jquery.cookie.js插件記錄用戶信息相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
jquery動態(tài)切換背景圖片的簡單實現(xiàn)方法
這篇文章主要介紹了jquery動態(tài)切換背景圖片的簡單實現(xiàn)方法,涉及jQuery自定義函數(shù)結(jié)合時間函數(shù)動態(tài)變換背景圖片的相關(guān)技巧,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery事件綁定on()與彈窗實現(xiàn)代碼,需要的朋友可以參考下2016-04-04
下面小編就為大家?guī)硪黄猨Query菜單實例(全選,反選,取消)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JQuery調(diào)用WebServices的方法和4個實例
你是不是經(jīng)常作這種開發(fā)，前端用JS寫邏輯，后端用aspx或者ashx作服務？你是不是經(jīng)常在請求aspx的時候在查詢字符串中拼接諸如a.aspx?method=getDepartmetn¶m1=1¶m2=2的字符串？2014-05-05