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
James Mulholland
Full Stack JavaScript Techdegree Student 20,944 PointsDelay for jQuery functions causing poor user experience.
I'm currently on the jQuery basics course and I've followed Treasure's instructions and added the following code to animate an alert at the top of the page:
$('#flashMessage').hide().slideDown(2000).delay(3000).slideUp(2000);
However, there's a brief moment before the message is hidden and this results in a jumpy looking page. How would I get the message to hide quicker so that it doesn't look so buggy?
2 Answers
martinjones1
Front End Web Development Techdegree Graduate 44,824 PointsI have not completed this course yet but done some quick testing.
This is likely related related to how the web page is rendered, first it will render the contents and style of the page, then it will load your scripts which you likely have in the footer and will wait until the document is ready or loaded. Then your script will hide it, this is why you get that quick flash.
This is more obvious when using Chrome Inspector, disabling the cache and setting the network connection to poor 3G.
One quick way to get around this would be to update the CSS for #flashMessage to
display:none;
This will hide it and not display it when the page is initially rendered.
Hope this helps.
James Mulholland
Full Stack JavaScript Techdegree Student 20,944 PointsThanks! Guess my internet was just going slower than in the vid? display:none; looks like a good trick, thanks.