[JQ権威ガイド]SlideDown()とSlideUp()メソッドによるスライド効果
1625 ワード
<!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>