如何动画在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);
    }
});

Answer 1

你可以像这样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的高度和宽度.

Answer 2

代替：

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

这样写：

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

这将显示或隐藏您的DIV。这是1行解决方案。

Answer 3

使用该Toggle函数来执行此操作。

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