更改使用jquery内联显示->时的fadein

Question

我正在做一个项目，我有一个“侧弹出”，我想让它设置为显示:没有在css中开始，以确保它没有“眨眼”时，它使用jquerys“隐藏()”。问题是：

• 当通过jquery将display属性设置为“内联”时，如何使div fadein生效？

我的代码ish(只为演示目的而编写)：https://jsfiddle.net/dzm50k39/

我试过用

  $(".popupContent").fadeIn().css("display", "inline");

这只会褪去其中的按钮。

对于如何使用jquery或css实现这一点，有什么建议吗？

如果可能的话，我不想消沉，而是从底部往上滑。

Answer 1

我通常是这样做的：

将您的display:none保持在css中，并使用以下方法：

$(".popupContent").css("display", "inline").hide().fadeIn();  // ends as an inline object

如果您想在淡入之后将其更改为内联，则需要在回调函数中这样做：

$(".popupContent").fadeIn(function() {
   $(this).css("display", "inline")
});

Answer 2

您可以通过转换属性来实现淡入或淡出。

$(".popupContent").css("display", "inline");

CSS：

.popupContent
{
  transition: all 0.5s ease-in-out;
}

希望它能帮上忙

Answer 3

我已将您的.css项替换为.fadein (参见小提琴叉 )

示例：

$(".popupContent").fadeIn(1000);