如何制作DIV幻灯片？

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

http://www.karenmillen.com/

如果您看到右侧并单击，则会产生我正在寻找的效果。 我假设这将涉及制作div并给它一个背景图像，然后使用一些jquery使div滑入视图。 当然div可能有其他内容，如html。 有任何想法吗？

.slideDown（）方法是否有效？

Answer 1

如果你想要一个div到slideDown（）首先它必须隐藏。 所以使用$("#div_Id").hide(); 之后使用$("#div_Id").slideDown('slow') ; 这会奏效

Answer 2

看看slideToggle

Answer 3

这是我到目前为止所拥有的：

  $（document）.ready（function（）{
 $（ '内。'）隐藏（）; 
   $（“button”）。click（function（）{
     $（ “＃STATIC_IMAGE”）隐藏（）。   
     $（ '内。'）的slideToggle（300）。
   }）;
 }）;

所以基本上动画div开始隐藏。 还有另一个带有背景图像的div，它排成一行，看起来好像动画div仍然有点突出。 然后单击按钮使静态div消失和动画div滑入视图。 然而，我不知道如何使时间完美，所以它很顺利，人们不会知道有两个div。 动画div需要几分之一秒才能移动到带有静态图像的div的位置，但静态图像会立即消失，留下不平滑的动画。

另外一件事是，如果动画div在用户点击后向下移动，我如何让静态图像div返回？ 它不能在用户单击“缩回”按钮的确切时刻，否则它肯定会出现在它应该出现之前。

Answer 4

为了使用animate()函数，将CSS类添加到具有height属性的

标记中，它可以是像素或％，这将是初始高度。 之后，您可以使用animate() 。

 $('#mydiv').animate({ height: 500px }, 5000, function() { // Animation complete. }); 

这会将div滑动到500px，这将花费5秒。