Heim >Web-Frontend >js-Tutorial >jQuery 淡出一个图像到另一个图像的实现代码_jquery

jQuery 淡出一个图像到另一个图像的实现代码_jquery

WBOY
WBOYOriginal
2016-05-16 17:32:33959Durchsuche

jQuery 淡出一张图片到另一张图片,例如有下边的 html:

复制代码 代码如下:


jQuery 淡出一个图像到另一个图像的实现代码_jquery



首先,确保 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);
});
});


完整实现代码:

复制代码 代码如下:

jQuery 淡出一个图像到另一个图像的实现代码_jquery





作者:jQuery学习
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn