Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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