Question

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

http://www.karenmillen.com/

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

.slideDown（）方法是否有效？

Answer 1

查看slideToggle

Answer 2

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

Answer 3

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

$(document).ready(function() {
$('.inner').hide(); 
  $("button").click(function() {
    $("#static_image").hide();   
    $('.inner').slideToggle(300);
  });
});

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

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

Answer 4

为了使用animate()函数将CSS类添加到具有height属性的<div>标记，它可以是像素或％，这将是初始高度。之后，您可以使用animate()。

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

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

如何制作DIV幻灯片？

4 个答案: