codeacademy コースhttp://www.codecademy.com/ru/courses/javascript-lesson-951/0?curriculum_id=4fc3018f74258b0003001f0f#!/exercises/6 - 垂直スライド パネルを作成しています。問題は、これらの codeacademy の担当者が、パネルを下にスライドさせるだけでなく、上にスライドさせる方法を説明していないことです。私はそれを自分でやろうとしましたが、何も達成しませんでした。助けてください。
$(document).ready(function(){
ANIMATION_LENGTH = 400;
$panel = $("#panel");
$tab = $("#tab");
var $isShown;
$tab.click(function($isShown){
alert($isShown);
if ($isShown == false)
{$isShown = true;}
else if ($isShown == true)
{$isShown = false;}
var newTop = $isShown == false ? "-180px" : "0px";
var lit = {"top": newTop};
$panel.animate(lit, ANIMATION_LENGTH);
return $isShown
});});
CSS
#panel {
padding: 50px;
height: 100px;
width: 500px;
text-align: center;
font-size: 24px;
font-family: Arial;
font-weight: bold;
background: #EEE;
cursor: pointer;
position:absolute;
top: -180px;
-webkit-border-bottom-left-radius: 10px;
}
#tab {
position:absolute;
bottom: -25px;
right: 0px;
padding: 10px;
background: #EEE;
font-size: 16px;
text-decoration: none;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
HTMl
<html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="panel.css" />
<script type="text/javascript" src="panel.js"></script>
</head>
<body>
<div id="panel">
Awesome hidden sliding pane
<a href="#panel" id="tab">Click to show</a>
</div>
</body>