jQuery的淡出没有显示没有？

77

淡出（）是否有不使用display：none作为样式的替代方法？我只想使用隐藏的可见性来避免页面布局发生任何变化？

jquery

118

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

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

这样，元素仍然像您想要的那样占据空间，它只是具有0不透明性，因此它实际上与visibility: hidden完成时的状态相同。

— 尼克Craver
source

12

但是，用户仍然可以单击元素（例如，链接），在这种情况下，您可能需要visibility: hidden;在完成回调函数中进行设置或类似的设置。

— 2010年

我想隐藏元素而不将显示设置为无。Additinaly我不想要的元素保留空间，它看起来如果没有什么页面上难看，但空间仍保留...

— 奥贝德Maroof

1

@ObaidMaroof正是行为显示：none for ...如果您要谈论的是您不想要的即时隐藏，那么您在使用.fadeOut（）之后，它会在褪色后显示：none 。

— 尼克·克拉弗

69

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

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

最后不会改变display属性。

— 用户名
source

3

淡至0时不会添加display：none，但如果淡至大于0的值，则会强制使用display：block（至少当display：none时）。因此，实际上在某些情况下确实会更改显示属性。我不得不使用animate（）来避免这种情况。

— 詹斯（Jens）2013年

但是，如果我想隐藏元素以使其不占据文档中的空间（如不显示任何内容），该怎么办。而所有这些都没有将显示设置为无。

— Obaid Maroof

效果很好，只需要添加淡入淡出和隐藏即可。$（'＃msgInfo'）。fadeTo（0，500）; $（'＃msgInfo'）。fadeTo（2000，0）;

— Patrick

3

自定义动画是一种替代 http://api.jquery.com/animate/

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

2

一种方法是捕获显示模式，然后是.fadeOut，然后完整地执行首选的隐藏方法，然后将显示设置回原来的状态：

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

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

— 蠕动
source

2

我想先淡出，然后更改内容，然后再淡入：

$("#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

});

— Jobima
source

谢谢！！这真的帮了我+1

— CHINE Oussama

0

注意

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

（奇怪地）与

fadeIn()

（当您想再次显示时）。因此，如果您正在使用

fadeTo(500, 0)

为了隐藏没有CSS的东西，display: none那么你必须使用

fadeTo(500, 1)

使其褪色，否则它仍将opacity: 0留在CSS中并保持不可见。

— 西蒙·韦弗
source