Question

我点击一个按钮后，我只是尝试在X秒内显示一个隐藏元素。我能够让它出现，但不要让它在X秒过后再次消失。我用delay(X)尝试过，但没有任何反应。

$("#mybutton").on(
  "click",
  function() {
    $("#test").css("visibility", "visible");
    $("#test").delay(1000).css("visibility", "hidden");
  }
);

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
  Button
</div>

JSFIDDLE ：https://jsfiddle.net/75sttmxj/

Answer 1

尝试在此背景下使用setTimeout()，

setTimeout(() => { $("#test").css("visibility", "hidden"); }, 1000 * 1000);

由于.delay()只能延迟动画队列。

DEMO

如果你不想使用arrow function这样做，那么你可以简单地使用下面的普通anonymous function，

setTimeout(function(){ $("#test").css("visibility", "hidden"); }, 1000);

Answer 2

与上述答案相同，但后来得到所有浏览器的支持

＆＃13;

$("#mybutton").on
(
  "click",
  function()
  {
  	$("#test").css("visibility","visible");
        setTimeout(function () 
        {
            $("#test").css("visibility", "hidden");
        }, 1 * 1000);
  }
);

＆＃13;

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}

#mybutton {
  border: 1px solid black;
  background-color: gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
    button
</div>

＆＃13;

Answer 3

.delay（）

.delay（）方法允许我们   延迟队列中跟随它的函数的执行。它   可以与标准效果队列一起使用，也可以与自定义队列一起使用。   只有队列中的后续事件才会延迟;例如，这将   不延迟.show（）或.hide（）的无参数形式   使用效果队列。

所以你可以使用，例如淡出： -

$("#mybutton").on("click", function() {
  $("#test").fadeIn().delay(1000).fadeOut();
});

#test {
  display: none;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="https://jsfiddle.net/img/logo.png">

<div id="mybutton">
  button
</div>

或创建自定义队列： -

$("#mybutton").on("click", function() {
  $("#test").queue(function() {
      $(this).css("visibility", "visible").dequeue();
    })
    .delay(1000)
    .queue(function() {
      $(this).css("visibility", "hidden").dequeue();
    });
});

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="test" src="https://jsfiddle.net/img/logo.png">

<div id="mybutton">
  button
</div>

Answer 4

尝试设置不透明度的动画：

＆＃13;

$("#mybutton").on(
  "click",
  function() {
    $("#test").animate({
      "opacity": 1
    }).delay(1000).animate({
      opacity: 0
    });
  }
);

＆＃13;

#test {
  opacity: 0;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
  Button
</div>

＆＃13;

Answer 5

$(document).ready(function () {
    $("#mybutton").on( "click",  function() {
        console.log('---------');
        $("#test").css("visibility", "visible");
        setTimeout(function () {
   $("#test").css("visibility", "hidden");
        }, 1000);
       
      });
      });

 #test {
      visibility:hidden;
    }
    #mybutton:hover {
      cursor: pointer;
    }
    #mybutton {
      border: 1px solid black;
      background-color: gray;
      float: top;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg" />

    <div id="mybutton">
      Button
    </div>

试试这段代码：

了解更多reference

使隐藏元素显示X秒

5 个答案:

DEMO