javascript - 10 秒后显示 div 并在 10 秒后隐藏

Question

我需要在页面加载后的 10 秒内显示一个 div（例如 #mybox），让它再保持 10 秒可见，然后以漂亮的滑入/滑出效果隐藏。

非常感谢任何提示/帮助！

Answer 1

请使用以下功能：

cycle();
function cycle() {
     $('#myid')
    .delay(10000)
    .fadeIn(300)
    .delay(10000)
    .fadeOut(300, cycle);
}

如果我们不需要循环，那么只需要一行代码：

$('#myid').delay(10000).fadeIn(300).delay(10000).fadeOut(300);

Answer 2

可能是这样：http: //jsfiddle.net/EzvGD/2/

$(function(){ //-----------------when page loads fire the code below.
  $('#div').delay(10000).show('slow').promise().done(function(){
     $('#div').delay(10000).hide('slow')
  });
});

Answer 3

$(function(){
  setTimeout(function(){
    $('ur_element').show(function(){
      setTimeout(function(){
        $('ur_element').hide()
      }, 10000)
    })
  }, 10000)
})

Answer 4

也许你可以尝试这样的事情。

setTimeout(show_div, 10000);
setTimeout(hide_div, 20000);

funciton show_div(){
    $('#mybox').show();
}

funciton hide_div(){
    $('#mybox').hide();
}

Answer 5

好的，将来最好向我们展示您尝试过的内容，以便我们都可以帮助改进您的代码。

在不知道你在处理什么的情况下，我会给你一种方法来做到这一点。

使用 jQuery

setTimeout(function() {
  $('#div1').slideIn();
  setTimeout(function() {
     $('#div1').slideOut();    
  }, 10000);
}, 10000);

Answer 6

http://jsfiddle.net/tzvemt4m/

$(".Mask").each(function() {
  var tempstr = this.innerText;
  var replacestr = this.innerText.replace(/./g, "*");
  $(this).mouseover(function() {
    this.innerText = tempstr;
  });
  $(this).mouseout(function() {
    var tempObj = this;
    setTimeout(function() {
      tempObj.innerText = replacestr;
    }, 10000);
  });
  this.innerText = replacestr;
});