使用jquery完成自动隐藏到边框

manx00

于 2010-07-27 14:42:00 发布

阅读量867

点赞数

CC 4.0 BY-SA版权

文章标签： jquery function javascript

本文链接：https://blog.youkuaiyun.com/manx00/article/details/5768940

本文通过一个简单的HTML页面展示了如何使用jQuery实现元素的淡入淡出及鼠标悬停显示效果。利用JavaScript库jQuery，该示例实现了两个div元素之间的交互：一个红色背景的div在鼠标悬停时触发另一个黑色背景div的淡入效果，并在一定时间后自动淡出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
  $("#d2").fadeIn(500,function(){
   setTimeout("$('#d2').fadeOut(1000)",6000);
  }).click(function(){
    $(this).fadeOut(1000);
  });

  $("#d1").mouseover(function(){
   $("#d2").fadeIn(1000);
  });
});
</script>
<style type="text/css">
#d1{
display:block;
background:red;
width:100%;
height:5px;
line_height:5px;
}
#d2{
display:none;
background:black;
width:100%;
height:200px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>