欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery动画效果-slideUp slideDown上下滑动示例代码

程序员文章站 2022-04-19 17:43:58
jQuery动画效果-slideUp slideDown上下滑动示例代码如下: [code]

jQuery动画效果-slideUp slideDown上下滑动示例代码如下:


[code]
<html>
<head>
<meta charset="utf-8"/>
<style>
*{ margin:0; padding:0;}
body{font-size:15px;}
#container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;}
.head{ background:#999; padding:5px; cursor:pointer;}
.content{ text-indent:15px;}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("h5.head").hover(function(){
$("p.content").slideUp(3000);
},function(){
$("p.content").slideDown(3000);
});
})
</script>
</head>
<body>
<p id="container">
<h5 class="head">什么是jQuery?</h5>
<p class="content">
JQuery是继prototype原型之后又一个javascript库，他凭借简单的代码和完善的浏览器兼容性，再加上强大的DOM操作，完善的事件处理机制，强大的ajax操作，加大的简化了javascript开发人员的工作。
</p>
</p>
</body>
</html>


[/code]

上一篇： 数据结构与算法的JavaScript描述之对列（代码实例）

下一篇： python如何用代码实现一款rsa加解密工具？

推荐阅读