I have a site with content uploading, but I don’t really like that it appears abruptly. I click on the link - and after 1 sec a block appears. I would like the block to hide for 2 seconds when the function is called, and then appear.

Closed due to the fact that the essence of the question is not clear to the participants of VenZell , Pavel Parshin , user194374, aleksandr barakin , tutankhamun 20 Feb '16 at 8:05 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • The example is desirable either on pure js, or on jQuery, without a difference. Thank you in advance. - W_0rld 1:53 pm
  • What unit will be hiding? - Jean-Claude
  • with id = 'BOOX'. By default it is empty, but when you click on a link, the content from the file is loaded into it. Here is the site: world.s56.wh1.su (not advertising) - W_0rld

2 answers 2

jQuery(document).ready(function($) { $('.navmenu .linked').on('click', function(){ $('#BOOX').hide(); $('#BOOX').fadeIn(); }) });
  • If the block is initially empty, and I load the info into it, it appears smoothly, and if I change the info inside it, then it appears again sharply. How can this be solved? - W_0rld
  • You can try CSS without any scripts: #BOOX {-webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;} - Webfeya
  • css does not rob, and the second option does not work either. The block of course appears, but it does not affect anything, because when you change the content, its contents change and not the block itself. Here is the site: world.s56.wh1.su (not advertising) - W_0rld
  • does not work .. but what if you click on a link to first hide the block and then smoothly appear? With wow? - W_0rld
  • How can I do that? It is desirable function, and then my links in onclick collect the parameters and then pass them to a function that already enumerates them and starts other functions. - W_0rld

You can upload content to a hidden div , then show it. To show the block after 2 seconds, use the setTimeout(showBum, 2000); function setTimeout(showBum, 2000); where showBum is a user-defined function, in our case it shows an area with loaded content, then 2000 - 2 seconds in milliseconds.

 $('#but').on('click', function(){ $('#time').show(); setTimeout(showBum, 2000); }); $('#but2').on('click', function(){ $('#time').hide(); $('#bum').hide(); }); function showBum(){ $('#bum').fadeIn(1000); } 
 #bum { font-size: 40px; display:none; } #time { display:none; } 
 <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <input type="button" value="загрузить" id="but"> <input type="button" value="сброс" id="but2"> <div id="time">Через 2 секунды загрузится.</div> <div id="bum">Бамбалей!</div>

  • Is there an option in this code to make a smooth appearance using js or jQuery? - W_0rld
  • @ W_0rld added fadeIn() . - Jean-Claude