簡單的問題:我有我想要淡入沒有對div
和css
使用display:none
一個div,因爲它擺脫,而不是隱藏它的div
的, ,使它下面的元素向上移動。jQuery的淡入()不透明度:0或visibility:hidden的
當我使用opacity:0
或visibility:hidden
,fadein
不起作用。
簡單的問題:我有我想要淡入沒有對div
和css
使用display:none
一個div,因爲它擺脫,而不是隱藏它的div
的, ,使它下面的元素向上移動。jQuery的淡入()不透明度:0或visibility:hidden的
當我使用opacity:0
或visibility:hidden
,fadein
不起作用。
您可以使用$.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>
在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>