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

最新推荐文章于 2021-06-03 14:38:01 发布

原创最新推荐文章于 2021-06-03 14:38:01 发布 · 882 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #javascript

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

<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>