Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Shams Nelson
Shams Nelson
2,888 Points
Posted by Shams Nelson
Shams Nelson
2,888 Points

How to make a button and text appear after a delay?

Hey,

So I'm trying to figure out how to get a BUY NOW button to be hidden (or delayed) for a specific period of time before appearing on the page. How can I achieve this?

Thanks!

2 Answers

robrravens
robrravens
6,140 Points
robrravens
robrravens
6,140 Points

Hi Shams,

Lauren's method is light and effective, if you don't mind the slight page load of using jQuery then it can also be used with something like this put into the bottom of your page:

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $(document).ready(function() {
      $('#mybutton').hide().delay(3000).fadeIn(2200);
});
    </script>

This assumes your button has id="mybutton"

The button stays hidden for 3 seconds (3000ms) and then fades into visibility over 2.2 seconds.

you don't need to use the .hide() if you set display:none

Working Codepen example

thanks,

Rob.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Transitions like this are one place where jQuery is far superior over JavaScript.

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

The easiest way of doing it is to just use Javascript's setTimeout() method. Set up all the styling for the button and text, and then set the containing element to display: none;

Then after an interval of time set, the javascript will insert the styling to display: inline; to make it visible again. You could also use visibility:hidden etc for now you're not sure about the positioning.

JsFiddle to Show Button & Text Appearing after Delay