jquery淡入淡出无延迟代码

最新推荐文章于 2025-09-11 14:33:48 发布

转载最新推荐文章于 2025-09-11 14:33:48 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/flying607/p/3495569.html

文章标签：

#javascript #ViewUI

本文介绍了如何使用jQuery库实现网页中按钮触发下三个矩形元素的淡入淡出动画效果，包括引入jQuery库、事件监听、CSS动画应用等关键步骤。

<!DOCTYPE html>

<html>

<head>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

  $("#button1").mouseover(function(){

       $(".div1").stop().animate({opacity:1},1000);

    $(".div2").stop().animate({opacity:1},1000);

    $(".div3").stop().animate({opacity:1},1000);

  });

 

  $("#button1").mouseleave(function(){

       $(".div1").stop().animate({opacity:0},1000);

    $(".div2").stop().animate({opacity:0},1000);

    $(".div3").stop().animate({opacity:0},1000);

  });

 

});

</script>

</head>

 

<body>

<button id="button1">鼠标放在这里，使三个矩形淡入</button>

 

<div class="div1" style="width:80px;height:80px;opacity:0;background-color:red;"></div>

<br>

 

<div class="div2" style="width:80px;height:80px;opacity:0;background-color:green;"></div>

<br>

 

<div class="div3" style="width:80px;height:80px;opacity:0;background-color:blue;"></div>

</body>

</html>