使用jquery实现图片淡入淡出

来源：互联网发布：中值滤波算法原理编辑：程序博客网时间：2024/06/05 18:18

html部分：

<div id="content"><div id="logo1"><img class="top" id="top" src="jslunbo1/images/logo1.png" /><div id="juzhong"></div></div><div id="logo2"><img class="top2" id="top2" src="jslunbo1/images/logo2.png" /><div id="juzhong2" class="top2"></div></div><div id="logo3"><img class="top3" id="top3" src="jslunbo1/images/logo3.png" /><div id="juzhong3" class="top3"></div></div></div>

css部分：

 #logo1{ width: 299px; height: 427px; /*border: 1px solid blue;*/ /*background: url("jslunbo1/images/logo1.png");*/ position: relative; opacity: 1; float: left; } #logo2{ width: 299px; height: 427px; /*border: 1px solid red;*/ /*background: url("jslunbo1/images/logo2.png");*/ opacity: 1; float: left; } #logo3{ width: 321px; height: 427px; /*border: 1px solid yellow;*/ /*background: url("jslunbo1/images/logo3.png");*/ opacity: 1; float: left;

jquery部分：

$(document).ready(function(){$("#logo1").hover(  function(){   $("#juzhong").stop().animate({opacity: '1'},3000);   $("#top").stop().animate({opacity: '0'},3000);  },  function(){   $("#juzhong").stop().animate({opacity: '0'},3000);   $("#top").stop().animate({opacity: '1'},3000);  });$("#logo2").hover(  function(){   $("#juzhong2").stop().animate({opacity: '1'},3000);   $("#top2").stop().animate({opacity: '0'},3000);  },  function(){   $("#juzhong2").stop().animate({opacity: '0'},3000);   $("#top2").stop().animate({opacity: '1'},3000);  });$("#logo3").hover(  function(){   $("#juzhong3").stop().animate({opacity: '1'},3000);   $("#top3").stop().animate({opacity: '0'},3000);  },  function(){   $("#juzhong3").stop().animate({opacity: '0'},3000);   $("#top3").stop().animate({opacity: '1'},3000);  });});

小提醒：不要忘记引入jquery

0 0