Javascript 我怎样才能使一个DIV滑进滑出？

我目前正在学习jQuery。我想知道当你点击一个图像的边缘时，如何让它滑入，然后再次点击，它就会滑走。与此类似：

如果你看到右手边并点击，那就是我想要的效果。我假设这将涉及制作一个div并给它一个背景图像，然后使用一些jquery使div滑入视图。当然，div可以有其他内容，比如html。有什么想法吗

---

.slideDown（）方法有效吗？

请签出如果要先将div slideDown（）隐藏起来。 所以使用

$（“#div_Id”）.hide（）
然后使用
$（“#div_Id”）.slideDown（'slow'）
；
这将起作用
以下是我到目前为止所做的：

$(document).ready(function() {
$('.inner').hide(); 
  $("button").click(function() {
    $("#static_image").hide();   
    $('.inner').slideToggle(300);
  });
});
$（文档）.ready（函数（）{
$（'.inner'）.hide（）；
$（“按钮”）。单击（函数（）{
$（“#静态_图像”）.hide（）；
$（'.inner'）。滑动切换（300）；
});
});
因此，基本上动画div开始隐藏。还有另一个具有背景图像的div，其排列方式看起来好像动画div仍然有点突出。然后单击按钮使静态div消失，动画div滑入视图。但是我不确定如何让时间安排得完美，这样就可以顺利进行，人们不会知道有两个div。动画div需要几分之一秒的时间才能移动到具有静态图像的div所在的位置，但是静态图像会立即消失，留下非平滑动画

还有一件事，在用户单击后动画div向下移动时，如何让静态图像div返回？它不能在用户单击“收回”按钮的确切时刻出现，否则它肯定会在应该出现之前出现。
要使用
animate（）
函数，请向具有高度属性的
标记添加CSS类，它可以是像素或%，这将是初始高度。之后，您可以使用
animate（）

这将使div滑到500px，需要5秒钟。
我找不到您看到的效果…您好，是的，这很有效。：）是否有可能使其不像示例中那样完全隐藏？我的意思是让它足够的可见，这样你就可以点击提示，让其余的滑入视图。然后我将绝对定位一个小div，它是click函数的目标，使其滑动。afik.hide（）将完全隐藏它。我正在尝试使外部div溢出：隐藏，然后使幻灯片的div具有位置：绝对，底部：-200px；。这使得它开始时只显示一点，但当我单击时，jquery会使它完全消失。使用CSS使用另一个具有相同图像的div，显示您希望显示的宽度，悬停时隐藏该div，并向下滑动另一个div，其中有完整图像。如果没有，请发表评论clear@Albinos：我认为动画是最简单的方法，你可以举一个使用animate（）的例子吗？在设置动画之前，检查animate div是否隐藏。检查此链接此逻辑将进入$（“#按钮）。单击（function（）{here…}
$('#mydiv').animate({
    height: 500px
  }, 5000, function() {
    // Animation complete.
  });