Question

我需要能够在默认情况下隐藏的div中平滑淡出。

我正在使用此代码：

$(".grey_cover").css({
    visibility: "visible"
}).fadeIn(2000, function () {
    $(".popup").css({
        visibility: "visible"
    }).fadeIn(3000);
});

Div grey_cover和popup默认为visibility:hidden。这段代码正在运行，但div只是弹出这么快......这毫秒没有做任何事情。我尝试使用slow选项代替milliseconds并且仍然存在相同的行为。< / p>

我想慢慢淡化它们。

Answer 1

您不应该使用visibility，而是display: none;。然后删除jQuery CSS部分。比你应该没事。

Answer 2

使用此

的CSS：

.grey_cover {
   visibility: visible;
   display: none;
}

.pop_up {
   visibility: visible;
   display: none;
}

的javascript：

 $(".grey_cover").fadeIn(2000, function() { 
     $(".popup").fadeIn(3000);
 });

Answer 3

如果您无法更改CSS规则。您可以将opacity设置为0，同时将visibility设置为visible。然后.animate()可以处理动画。

$(".grey_cover").css({
    opacity: 0,
    visibility: "visible"
}).animate({
    opacity: 1
}, 2000, function() {
    $(".popup").css({
        opacity: 0,
        visibility: "visible"
    }).animate({
        opacity: 1
    }, 3000);
});

话虽如此，在大多数情况下使用display会更好。

Answer 4

在淡入它们之前，你可以看到它们 - 你不需要让它们可见，fadeIn会处理它。

如果div被隐藏，如何使用fadeIn（）

4 个答案: