我的页面顶部有一个 div,里面有一个关闭按钮,单击该按钮会使 div 消失,这就是我想要的,但是我想让 div 淡出,而不是只是去“POOF”,它立即消失了。我该怎么做?
当前代码:
<div class="topimage">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'></span>
</div>
顶部图像是消失的 div,跨度是关闭按钮。
我已经尝试在其中添加 .fadeout()
,但是没有用 - 或者我没有将其添加到正确的位置,这可能就是这种情况。
最佳答案
其他人建议使用 jQuery,但是您似乎没有使用 jQuery,没有它也可以完成。
首先我建议不要使用 onclick 属性。将 JavaScript 保存在 javascript 文件中,将 HTML 保存在 HTML 文件中。 请参阅:http://en.wikipedia.org/wiki/Separation_of_concerns
现在的解决方案是在“topimage”div 上为不透明度设置一个 CSS3 过渡,然后在单击时对其应用一个类,将其不透明度设置为 0。这将创建淡出效果。然后您可以设置超时以从页面中删除 div。确保此超时长度与 CSS3 过渡时间匹配。
HTML:
<div class="topimage">
<span id='close'>x</span>
</div>
CSS:
.topimage{
transition: opacity 500ms;
}
.topimage.fadeOut{
opacity: 0;
}
JS:
var close = document.querySelector("#close");
close.addEventListener('click', function(){
var parent = this.parentNode;
parent.classList.add('fadeOut');
setTimeout(function(){
parent.remove();
}, 500);
});
关于javascript - 关闭 Div - 淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29855339/