Show div after 10 secs and hide after 10 secs

Question

I need to show a div (e.g. #mybox) in 10secs after page load, keep it visible for another 10 secs and then hide with a nice sliding in/out effects.

Thanks a lot for any hints/helps!

Answer 1

Please use the below function:

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

If we don't need a loop, then just one line of code is needed:

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

Answer 2

Perhaps you can try something like this.

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

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

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

Answer 3

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

Answer 4

May be this way: 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 5

Ok in the future it's best to show us what you have tried so we can all help to improve your code.

With out knowing what your dealing with I'll give you one of many way's to do it.

Using 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;
});