建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > Javascript/Ajax

利用jquery进行控制,实现div层的淡入淡出

来源:  时间:2018-10-16 15:56:23

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{ background:#D7FFF7;}
div{ background:#0080FF; width:500px; height:200px; padding:20px; color:#fff; display:none;}
</style>
<script type="text/javascript" src="style/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").animate({marginTop:100, opacity:'show'},{ duration: 1000 }).fadeOut(5000);
});
</script>
</head>
<body>
<div>
<h3>淡入淡出</h3>
<p>利用jquery进行控制,实现div层的淡入淡出。</p>
<p>这里js控制的三个数值,第一个为从上往下移动的距离,第二个为淡入时间,第三个为淡出时间,这三个时间可以根据自己需要自行调整。</p>
<p>src="js/jquery-1.3.1.js"这个为调用的jquery库,可以在网上下载到,最新版本为jquery-1.4.2.js,路径根据自己实际情况进行调整</p>
</div>
</body>
</html>

责任编辑:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2019, JZREAD.COM, Inc. All Rights Reserved
皖ICP备09015033号