[JQ权威指南]SlideDown()与SlideUp()方法实现滑动效果

本文链接：https://blog.csdn.net/david_520042/article/details/51788488

<!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>SildeDown()与slideUp()方法</title>
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
<style type="text/css">
	body{font-size:13px}
	.divFrame{width:86px; border:solid 1px #666}
	.divFrame.divTitle{ padding:5px; background-color:#eee}
	.divFrame.divContent{padding:8px}
	.divFrame.divContent img{border:solid 1px #ccc; padding:2px}
	
</style>
<script type="text/javascript">
	$(function(){
		var blnShow=false;
		var $Title=$(".divTitle");
		var $Tip=$("#divTip");
		$Title.click(function(){
			if(!blnShow){
				$("img").slideUp(3000,function(){
					$Tip.html("关闭成功！");
					})
					$(this).html("显示图片");
					blnShow=true;
				}
				else{
					$Tip. html("");
					$("img").slideDown(3000);
					$(this).html("隐藏图片");
					blnShow=false;
					}
			})
		})
		</script>
</head>
<body>
	<div class="divFrame">
    	<div class="divTitle">隐藏图片</div>
        <div class="divContent">
        	<img src="Images/dezai.jpg" alt="" />
            <div id="divTip"></div>
        </div>
    </div>
</body>
</html>