jQuery 淡出一個圖像到另一個圖像的實作程式碼_jquery

jQuery 淡出一張圖片到另一張圖片，例如有下邊的html：

複製程式碼 程式碼如下:

首先，確保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);

});
});

完整實作程式碼： 複製程式碼

程式碼如下:

$(this).find("img").stop(true, true).animate({ opacity: 1 }, 500 );
});
}); 作者：jQuery學習