【示例】
-
HTML
<!--添加图片,以实现淡入淡出的效果--> <div id="img"> <img src="images/sample1.jpg" width="300"> <img src="images/sample3.jpg" width="200"> <img src="images/sample5.jpg" width="300"> <img src="images/googlelogo.jpg" width="300"> </div>
-
JS
//定义页面加载事件 $(document).ready(function(){ //当鼠标移过时 $("#img img").mouseover(function(){ //对于非当前的图片元素,动画使其透明度变为0.1 $("#img img").not(this).animate({opacity:0.1},400); }).mouseout(function(){ //鼠标移出时的效果 //动画使其透明度变为100% $("#img img").animate({opacity:1},400); }); });