0

I want this button to fade in after a delay when I load my page.

How can I do this in jQuery? And how can I have my other buttons also fade in after a delay?

HTML:

<button class="button button2" id="button">Enter</button>

CSS:

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-left: 500px;
margin-top: 150px;
transition-duration: 0.4s;
cursor: pointer;
font-weight: 5000;
}

.button2 {
background-color: transparent; 
color: white; 
border: 2px solid white;
}

.button2:hover {
background-color: white;
color: black;
font-weight: 800;
}
Benjamin W.
  • 46,058
  • 19
  • 106
  • 116
Xavier Foster
  • 27
  • 6
  • https://stackoverflow.com/q/11679567/1531971 or tell us what other research you have done if this is not relevant. –  May 23 '18 at 16:29
  • yes, this worked!!! thnx a lot :) – Xavier Foster May 23 '18 at 16:45
  • 1
    Possible duplicate of [Using CSS for fade-in effect on page load](https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load) –  May 23 '18 at 16:47

1 Answers1

0

Change the class selector, or replicate however you wish to use with different elements. You can comma separate multiple classes. The 500 represents half a second wait time, you can also add a value inside the fadeIn method to change the speed.

$(function(){    
    setTimeout(function(){ 
        $('.button2').fadeIn();
    }, 500);
});
Chris
  • 170
  • 1
  • 12
  • i just copied your code and used it in my script still nothing happened :/ – Xavier Foster May 23 '18 at 16:24
  • Can you share your script if it's not too large? Have you got the jQuery library included in your page? If an error occurs beforehand this may not run, is there any messages in the developer console? – Chris May 23 '18 at 16:27
  • yes jQuery libraray is included in my page and here are my all scripts of my page. 1st script is of my FosterX Gaming Logo and 2nd is of button that you told me – Xavier Foster May 23 '18 at 16:28