Javascript 使用jQuery和CSS的SlideUp效果

我正在努力修复我的幻灯片效果

我希望黄色的div向上移动200像素。现在它正在向下移动40像素：(

有人能帮忙吗

var=true；
$（.one”）。在（'click'，function（）上{
如果（单击）
{
单击=假；
$（.two”）.css（{“top”：0}）；
}
其他的
{
单击=真；
$（.two”）.css（{“top”：“-40px”}）；
}
})；

h1{
字体大小：72px；
利润率：100px0；
}
.集装箱{
溢出：隐藏；
高度：60px；
浮动：左；
}
.一{
位置：相对位置；
底部：0；
背景颜色：浅蓝色；
z指数：1；
光标：指针；
}
.二{
位置：相对位置；
底部：40px；
背景颜色：黄色；
z指数：-1；
-webkit过渡：前1名；
-moz转换：前1；
-o-过渡：前1s；
过渡：前1名；
}
/*.1:悬停+.2{
顶部：0px；
}*/

让我们来测试一下！
单击我以显示新div
我滑倒了！

而且我比我前面的那个div还高。。。

这就是你要找的吗

我已经移动了大约一个

var=true；
$（.one”）。在（'click'，function（）上{
如果（单击）
{
单击=假；
$（.two”）.css（{“top”：0}）；
}
其他的
{
单击=真；
$（.two”）.css（{“top”：“40px”}）；
}
})；

h1{
字体大小：72px；
利润率：100px0；
}
.集装箱{
溢出：隐藏；
高度：60px；
浮动：左；
}
.一{
位置：相对位置；
底部：0；
背景颜色：浅蓝色；
z指数：1；
光标：指针；
溢出：隐藏；
高度：40px；
}
.二{
位置：相对位置；
底部：40px；
背景颜色：黄色；
z指数：-1；
-webkit过渡：前1名；
-moz转换：前1；
-o-过渡：前1s；
过渡：前1名；
}
/*.1:悬停+.2{
顶部：0px；
}*/

让我们来测试一下！
我滑倒了！

而且我比我前面的那个div还高。。。
单击我以显示新div

非常感谢您的详细回复。是否有可能在打开

后，它再次向下滑动而不是向上滑动？@michaelmcgurk我刚刚编辑了蓝色div，并将其高度设置为40px，以允许黄色div完全隐藏。如果这是您要查找的答案，请单击绿色勾选：）太棒了-非常感谢你！！一个简单的问题，为什么第一次点击会立即显示，而不是逐渐显示？我不能100%确定，如果你一直点击，只有第一个动画是快速的，每个后续都是相同的较慢速度。