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

2019/6/29 22:42:44

编程Tag： slideUp slideDown 上下滑动

本文主要是介绍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(){ 
$("div.content").slideUp(3000); 
},function(){ 
$("div.content").slideDown(3000); 
}); 
}) 
</script> 
</head> 
<body> 
<div id="container"> 
<h5 class="head">什么是jQuery?</h5> 
<div class="content"> 
JQuery是继prototype原型之后又一个javascript库，他凭借简单的代码和完善的浏览器兼容性，再加上强大的DOM操作，完善的事件处理机制，强大的ajax操作，加大的简化了javascript开发人员的工作。 
</div> 
</div> 
</body> 
</html> 

[/code]

这篇关于jQuery动画效果-slideUp slideDown上下滑动示例代码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章