Question

js code：

function showStuff(id) {
    document.getElementById(id).style.visibility = 'visible';
    window.scrollTo(0, 0);
    setTimeout(function () {
        $('#axx').fadeOut('fast');
        document.getElementById(id).style.visibility = 'hidden';
    }, 1000)
}

css代码:(用于测试js）

#axx{
    visibility: hidden;
    width: 100%;
    z-index: 999;
    height: 25px;
    background:black;
}

html代码：

<div id="axx" style="position: absolute;">asd</div> //the shown/hidden div

<input type="button" class="button_p_1" onclick="showStuff('axx');"></input> // the button is jsut for testing

它第一次工作很棒，但是如果我再次点击按钮，div就不会显示出来了，我试着让settimeout函数的样式仍无法正常工作。

我正在尝试将其用于错误和成功消息，我该如何使其发挥作用？

Answer 1

这是因为fadeOut通过设置透明度而非可见性来隐藏axx元素。尝试fadeIn回来。

function showStuff(id) {
    document.getElementById(id).style.visibility = 'visible';
    window.scrollTo(0, 0);
    setTimeout(function () {
        $('#axx').fadeOut('fast');
        document.getElementById(id).style.visibility = 'hidden';
        $('#axx').fadeIn();
    }, 1000)
}

Answer 2

您也可以尝试使用animate（）：

function showStuff(id) {
  document.getElementById(id).style.visibility = 'visible';
  window.scrollTo(0, 0);
  setTimeout(function () {
    $('#axx').animate(
    { visibility: 'visible' }, 500, 'linear');
    document.getElementById(id).style.visibility = 'hidden';
  }, 1000);
}

在第二次淡出后显示div

2 个答案: