I am trying to load a html form which has submit button after end of a loading screen/animation..
In short, First loading screen or animation shoul run.. It shoul run for 15 seconds…
Then, form should load.
Here is my code
<div id="load">
<span>Loading...</span>
</div>
<div id="loader">
<form method="POST" action="submit.php">
<button type="button" class="btn btn-primary" id="btnsubmit" name="btnsubmit">Submit </button>
</form>
</div>
Here is my jquery
$(window).load (function (){
$('#loader').fadeOut ('slow', function(){
$('#load').fadeIn ('slow');},15000);});
My codes not work… can anyone help me? Please
Advertisement
Answer
The function .fadeOut (https://api.jquery.com/fadeout/) has only the parameters [duration ] [, easing ] [, complete ]. The timeout must therefore be managed with Javascript.
The #load is hidden by default with CSS. The timeout function waits as long as defined in waitTimeUntilFadeOut. Then #loader is faded out and #load is faded in within the complete function.
$(window).on('load', function(){
var waitTimeUntilFadeOut = 2000 ;
setTimeout(function() {
$('#loader').fadeOut ('slow', function() {
$('#load').fadeIn ('slow');
});
}, waitTimeUntilFadeOut);
});#load {
display:none;
}<html> <body> <div id="loader">loader</div> <div id="load">load</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>