Question

对于样式，是否有fadeOut（）的替代方法不使用display：none？我想隐藏可见性，以避免在页面布局中出现任何变化？

Answer 1

您可以直接在opacity上使用.animate()：

$(".selector").animate({ opacity: 0 })

这样元素仍然可以像你想要的那样占据空间，它只有0不透明度，所以它的有效与visibility: hidden完成时相同。< / p>

Answer 2

是的，还有另一种选择。 It's called .fadeTo()，您可以在其中设置目标不透明度，在您的情况下为0。

$('element').fadeTo( 1000, 0 ); // fade to "0" with a 1000ms duration

这不会改变最后的display属性。

Answer 3

自定义动画是另一种选择 http://api.jquery.com/animate/

.animate({opacity: 0.0}, 5000, 'linear', callback);

Answer 4

这样做的一种方法是捕获显示模式，然后是.fadeOut，并在完整中，执行您首选的隐藏方法，并将显示设置回原来的样式：

var $element = $('#selector');

var display = $element.css('display');
$element.fadeOut(500, function() {
   $element.css('visibility', 'hidden'); 
   $element.css('display', display);
}

Answer 5

我想要 fadeOut ，然后更改内容，然后再次淡入淡出：

$("#layer").animate({opacity: 0}, 1000, 'linear', function(){

    //Do here any changes to the content (text, colors, etc.)
    $("#layer").css('background-color','red'); //For example

    $("#layer").animate({opacity: 1}); //FadeIn again

});

Answer 6

请注意

fadeTo(500, 0)   // fade out over half a second
fadeTo(0, 0)     // instantly hide

（奇怪地）与

不兼容

fadeIn()

（当你想再次展示时）。所以如果你正在使用

fadeTo(500, 0)

为了隐藏没有css display: none的内容，你必须使用

fadeTo(500, 1)

将其淡入或者仍会在css中遗留opacity: 0并保持隐身状态。

jQuery fadeOut没有显示没有？

6 个答案: