"Show Button After Time"
Bootstrap 3.3.0 Snippet by agiltriono

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class='text-center'>
<h3 class='text-center'>Showing Element</h3>
<button class='btn btn-danger btn-lg' onclick='myFunc()' id='button'>Click To Action</button>
<button style='display:none' id='buttonID' onclick='myFunc()' class='btn btn-danger btn-lg'>This Is A Button</button>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
.container{margin:0 auto}
@-webkit-keyframes fadeIn{to{opacity:1}}
@keyframes fadeIn{to{opacity:1}}
.fade-in{-webkit-animation:fadeIn .5s ease-out 1 forwards;animation:fadeIn .5s ease-in 1 forwards;opacity:0}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function myFunc() {
var linAs = document.getElementById("button");
var linkEd = document.getElementById("buttonID");
var timing = 6;
var text_timing = document.createElement("span");
linkEd.parentNode.replaceChild(text_timing, linkEd);
var id;
id = setInterval(function() {
timing--;
if (timing < 0) {
clearInterval(id);
$(linkEd, text_timing).fadeIn("slow");
text_timing.parentNode.replaceChild(linkEd, text_timing);
linAs.style.display = "none";
} else {
text_timing.innerHTML = "<div id='timming' class='text-danger fade-in'>Button Will Appear After <strong>" + timing.toString() + " Second</strong></div>";
linkEd.style.display = "inline";
linAs.style.display = "none";
}
if (timing < 5) {
$("#timming").removeClass("fade-in");
}
}, 1000);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: