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學(xué)習(xí)
復(fù)制代碼 代碼如下:
<div class="fade">
<img src="1.jpg" />
</div>
首先，確保 div 的大小和圖片大小一樣，這個 div 有另一個背景圖，如下：
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);
});
});
完整實現(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í)
相關(guān)文章
如果希望取到tagName后再進行判斷，可以使用$(element).is()來實現(xiàn)2014-05-05
jQuery獲得包含margin的outerWidth和outerHeight的方法
這篇文章主要介紹了jQuery獲得包含margin的outerWidth和outerHeight的方法,涉及jQuery中outerWidth及outerHeight方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery的實現(xiàn)原理的模擬代碼 -3 事件處理
在 jQuery 中，實際注冊的事件處理函數(shù)是一個匿名的閉包函數(shù)，這個函數(shù)最終都是通過調(diào)用 jQuery.event.handle 進行處理的。2010-08-08
jQuery+PHP+Ajax實現(xiàn)動態(tài)數(shù)字統(tǒng)計展示功能
這篇文章主要介紹了jQuery+PHP+Ajax實現(xiàn)動態(tài)數(shù)字統(tǒng)計展示功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
jQuery插件PageSlide實現(xiàn)左右側(cè)欄導(dǎo)航菜單
jQuery pageSlide 是一個可以讓網(wǎng)頁出現(xiàn)滾動效果的jQuery插件，它可以控制一個隱藏頁面的顯示和關(guān)閉。具體來說，就是當(dāng)前頁占一個完整頁面，隱藏頁是看不到的，你設(shè)置一個控制的地方，點擊該控制時觸發(fā)事件，隱藏的頁面就滑出來，再次點擊隱藏頁面以外的地方，它就又關(guān)閉2015-04-04
本文給大家匯總了下在jQuery中判斷對象是否存在的方法以及用原生javascript實現(xiàn)的方法，有相同需求的小伙伴可以來參考下。2016-02-02
jquery插件如何使用 jQuery操作Cookie插件使用介紹
本文將介紹jQuery如何操作Cookie插件,需要了解的朋友可以參考下2012-12-12
JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
這篇文章主要是對JS和JQUERY獲取頁面大小,滾動條位置,元素位置的示例代碼進行了介紹。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jQuery實現(xiàn)frame之間互通的方法,結(jié)合實例形式分析了jQuery實現(xiàn)frame父子框架之間的調(diào)用操作實現(xiàn)方法,需要的朋友可以參考下2017-06-06
這篇文章給大家總結(jié)了使用jq獲取元素值的常見寫法,文中給大家介紹了詳細的代碼示例,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12