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

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

程序员文章站 2022-09-15 22:19:01
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]

上一篇： JQuery 文本框回车跳到下一个文本框示例代码

下一篇： 输入重定向，输出重定向，管道相关内容及实现方法

推荐阅读