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!

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!

• javascript
• jquery
• css-transitions

• 3 What have you tried? Have you google it first ? tobiasahlin./blog/quick-guide-chaining-in-jquery or stackoverflow./questions/3094419/chaining-jquery-animations – radu florescu Commented Jan 31, 2013 at 6:47
• 1 please show us what have you tried – Mandeep Jain Commented Jan 31, 2013 at 6:49
• you can try with .delay(10000).show() and .delay(15000).hide() – Jai Commented Jan 31, 2013 at 6:52
• So, ten seconds or fifteen seconds? I am going to assume the description is correct, and fix the title. – John Dvorak Commented Jan 31, 2013 at 7:18
• Dont post questions like this, munity will not support non research questions. – sij Commented Jan 31, 2013 at 7:20

6 Answers 6

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

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

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

May be this way: http://jsfiddle/EzvGD/2/

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

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

http://jsfiddle/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;
});