57、实例使用jQuery设计滑动显隐效果

xuxianmei

于 2014-07-10 16:38:04 发布

阅读量730

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/tlxxm/article/details/37658753

jQuery 专栏收录该内容

63 篇文章

订阅专栏

本文介绍如何使用jQuery库实现HTML元素的滑动显隐动画效果，通过按钮点击触发div元素的淡入淡出动画，展示了jQuery简化前端交互开发的特性。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用jQuery设计滑动显隐效果</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>

<script>
$(document).ready(function(e) {
    $("button").click(function()
	{
		$("div").slideDown(1000,function()
		{
			//alert($("div").css("display"));//显示为block
			$("div").slideUp("slow",function(){
				alert("div元素重新被隐藏起来");
				//alert($("div").css("display"));//显示为none
				});
			})
		});

});;
</script>
</head>

<body>
<button>滑动效果</button>
<div style="display:none;">
<img src="images/006f.jpg" width="438" height="600">
</div>

</body>
</html>