如何使Invisible div在Jquery中竞争？

Question

Can you please tell me how to make invisible content of div..In other words I make example in which I am printing a line in div .But It will not visible to user But it should write in div .but afer some time it is visible to user.

I try visibility hidden But not work ..

http://jsfiddle.net/QuETp/2/

setInterval(function(){

$('#test').append('hi i am div.')
console.log($('#test').html());
},1000);

Answer 1

Add this line:

$('#test').hide();

at top.

And then add this part of code:

setTimeout(function(){
   $('#test').show('fade');
},5000);

So your full code will become:

$('#test').hide(); // hides the div

setInterval(function () {
    $('#test').append('hi i am div.')
    console.log($('#test').html());
}, 1000); // adds line to the div

setTimeout(function () {
    $('#test').fadeIn();
}, 5000);  // shows the div after 5 seconds with fading animation.

Demo

Answer 2

Do you expect like this

HTML

<div id="test"></div>

<input type="button" id="doBlock" value="doBlock">

CSS

#test{

   height:100px;
    overflow:auto;
    border:1px solid red;
    width :100%;
    display:none;
}

javascript

setInterval(function(){

$('#test').append('hi i am div.')
//console.log($('#test').html());
},1000);

$( "#doBlock" ).click(function() {
  $( "#test" ).css("display", "block");
});

Demo http://jsfiddle.net/QuETp/6/