我正在尝试使用 JavaScript 和 CSS3 创建淡出和淡出效果。目标是在单击时缩小 div 的宽度,并使其中包含的文本同时淡出。然后当再次单击它时,div 会扩展回正常宽度,并且文本会淡入。
这是HTML:
<div id="box1" onclick="slide1()">
<p class="fader">Lorem ipsum.</p>
</div>
这是CSS:
#box1 {
position:relative;
left:0%;
top:0%;
width: 70%;
height: 100%;
background-color: #666;
z-index:4;
}
这是javascript:
var box1
var fader
window.onload = function() {
box1 = document.getElementById('box1');
fader = document.getElementsByClassName('fader');
}
function slide1(){
if(box1.style.width=='10%'){
box1.style.width='70%';
fader[0].style.opacity='1';
fader[0].style.transition='opacity 0.25s ease-in';
}
else {
box1.style.width='10%';
fader[0].style.opacity='0';
fader[0].style.transition='opacity 0.75s ease-in';
}
}
它适用于淡出,但对于淡入,它会立即从 0 不透明度过渡到 1 不透明度......没有淡入。有任何想法吗?