jQuery的淡入（）不透明度：0或visibility：hidden的

Question

简单的问题：我有我想要淡入没有对div和css使用display:none一个div，因为它摆脱，而不是隐藏它的div的， ，使它下面的元素向上移动。

当我使用opacity:0或visibility:hidden,fadein不起作用。

Answer 1

您可以使用$.fadeTo()更改opacity而不是display，方法与$.fadeIn()相同。

您也可以在CSS中更改opacity并使用transition来处理“淡入淡出”效果。

$('#fadeto').fadeTo(1000,1); 
 
$('#css').addClass('visible');

#fadeto { 
 
    opacity: 0; 
 
} 
 
#css { 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 
#css.visible { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>foo</div> 
 
<div id="fadeto">fadeto</div> 
 
<div>foo</div> 
 
<div id="css">css</div> 
 
<div>foo</div>

Answer 2

在jQuery中，如果你只是想淡出不发生变化，显示的属性，你可以使用以下命令：

$element.animate({ opacity: 0 }, 1000); 

例如：

$('#fade').click(function(){ 
 
    $('#fadeout').animate({ opacity: 0 }, 1000); 
 
})

#fadeout{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="fade">Fade out now</button> 
 
<br /> 
 
<div id="fadeout">I'm visible atm</div> 
 
<div>some other stuff</div>