Question

我的页面顶部有一个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()，但这不起作用 - 或者我没有将其添加到正确的位置，这可能就是这种情况。

Answer 1

其他人建议使用jQuery，但是你似乎没有使用jQuery，没有它就可以完成。

首先我建议不要使用onclick属性。将JavaScript放在javascript文件中，将HTML保存在HTML文件中。请参阅：http://en.wikipedia.org/wiki/Separation_of_concerns

现在解决方案是在你的＆＃34; topimage＆＃34;上设置CSS3过渡。 div为不透明度，然后在点击时将一个类应用于它，将其不透明度设置为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);
});

http://jsfiddle.net/swoogie/rcpjnj3f/

Answer 2

fadeOut（）是一个jQuery函数。在页面中包含jQuery后，您可以执行以下操作：

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

你的javascript看起来像这样：

$( "#clickme" ).click(function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

这取自jQuery website。

Answer 3

如果jquery没问题，可以这样做：

<div id="fader">Click to fade out</div>


$( "#fader" ).click(function() {
  $( "#fader" ).fadeOut( "slow", function() {});
});

http://jsfiddle.net/smandl/tj55xxc6/

关闭Div - 淡出？

3 个答案: