如何使用jQuery动画显示隐藏的div？

Question

这是一个简单的问题，但我似乎无法解决。

我有一个div，在页面加载时隐藏，如下所示：

$("e").hide();

当用户执行特定操作时，我希望该div能够优雅地动画或向下滑动。但在我的网站上，动画只是闪烁并显示隐藏的div，没有淡入淡出或slideDown效果。

我使用：

$("#e").hide();
$("#p").change(function() {
    if ($("#p").val() === 'Married') {
        $("#e").slideDown(500);
    } else {
        $("#e").slideUp(500);
    }
});

- Eli

---

$("#p") 是什么？是哪个元素？ - Reigel Gallarde

http://stackoverflow.com/questions/3920865/trouble-with-div-hide-show-on-mouse-click - Quazi

Answer 1

你可以使用 animate 来实现与此类似的效果，具体可以参考 animate。

$("#e").hide();
$("#p").change(function(){
    if($("#p").val() === 'Married'){
        $("#e").animate( { "opacity": "show", top:"100"} , 500 );
    }else{
        $("#e").animate( { "opacity": "show", top:"150"} , 5000 );
    }
});

要实现上下滑动，你可以调整div的高度和宽度。

- Vivek

---

该 div 嵌入在另外两个 div 的中间，我希望该 div 在向下滑动时将底部的 div 推下。 - Eli

这很不错，但我可以问一下吗……有没有一种方法使它在淡入视图时“推动”其下方的DIV？ - Eli

Answer 2

改为：

 {
    $("#e").slideDown(500);
 } else {
    $("#e").slideUp(500);
 }

请用文字表达：

$("#e").toggle(500);

这将展示或隐藏您的DIV。它是一个一行代码的解决方案。

- Enriqe

Answer 3

使用Toggle函数来实现这个功能。

$("#p").toggle(function(){
    // Your toggle code here
});

- Neil Knight

---

我似乎不明白为什么在$("#p")上使用.toggle()？ - Reigel Gallarde

这似乎是最好的方法。 - Zach Cook

Answer 4

您可以使用Animate Animate 简单示例：

$("#p").animate({ opacity: 0 }, 600).prependTo($list);

其中list是父元素

在所有浏览器中都可以正常工作

- Hiyasat

Answer 5

我知道这篇文章已经几年了，但是如果你像我一样在寻找同样的信息，现在可以使用一个持续时间来为你执行滑动动画。例如：

$("#p").change(function() {
  $("#e").toggle(500);
});

还有很多选项可用。

- Ralph Bolton

Answer 6

为什么不直接使用$("#e").fadeOut(250);或类似的方法呢？

- Barrie Reader

---

因为DIV在用户执行某个操作之前是隐藏的，如果我将其淡出，当我的表单加载时它会显得很奇怪 :-) - Eli