使用jQuery将新的css应用于元素，如何添加过渡？

Question

我使用此jQuery规则将.preloader设置为显示none

$(".preloader").css("display", "none");

我多么希望它在淡出效果和淡出效果下消失，我不知道怎么做缩小效果，但我试着用这个来使它淡出

$(".preloader").css("display", "none").fadeOut("200");

这怎么也不管用。你能建议一下如何实现这两个效果吗？另外，解决方案会反之亦然吗？(淡入淡入，放大到原始大小)

Answer 1

$(".preloader").toggle('hide');和$(".preloader").toggle('show');应该可以做到这一点，但是如果您不关心$.toggle()的状态是什么，那么display本身就可以工作。

然而，

$(".preloader").stop(true,false).animate({
    width: 'toggle',
    height: 'toggle',
    opacity: 'toggle'
});

要酷得多，而且你只需要一句话。您也可以在$.toggle(yourShowStateBooleanVariableGoesHere)中使用boolean。

此外，我建议您使用id而不是class选择器，除非它必须应用于所有classes (我发现这种情况很少见)。

Answer 2

为了淡出它，只需使用fadeOut()即可。动画的结尾实际上是为元素设置了一个display: none：

$(".preloader").fadeOut("200");

Answer 3

$(".preloader").css("display", "none").fadeOut("200");

这段代码首先隐藏.preloader，然后尝试fadeOut，这是不可能的，因为它已经隐藏了。

试试这个：

$(".preloader").fadeOut(200);

或

$(".preloader").fadeOut("fast");