如何在 jquery 中动画显示隐藏的 div？

how to animate show a hidden div in jquery?

提问by Eli

Dumb question but I can't seem to figure this out.

愚蠢的问题，但我似乎无法弄清楚这一点。

I have a div and hide it when the page loads like so

我有一个 div 并在页面加载时隐藏它

$("e").hide();

then when a user persons a specific action I want the div to animate or slide down gracefully. But on my site the animation just flashes and shoes the hidden div and no fade or slideDowneffects occur.

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

I use

我用

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

回答by Vivek

You can use animateto do the same thing animatelike this.

您可以使用动画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 );
    }
});

to slide up and down you can play with height and width of div.

上下滑动你可以玩 div 的高度和宽度。

回答by Enriqe

Instead of:

代替：

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

Write this:

写这个：

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

This will show or hide your DIV. It's 1 line solution.

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

回答by Neil Knight

Use the Togglefunction in order to do this.

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

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

回答by Hiyasat

You can use Animate Animatesimple example:

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

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

where list is the parent

其中 list 是父级

and it works fine with all browsers

它适用于所有浏览器

回答by Barrie Reader

Why not just $("#e").fadeOut(250);or something?

为什么不只是$("#e").fadeOut(250);什么？