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

JavaScript

Posted by Kostas Koutoupis
Kostas Koutoupis
15,010 Points

fadeIn() and fadeOut() div content on click

Hi,

I'm trying to create a random quote generator. The idea is that each time the user clicks on the button a random quote appears that's drawn from a javascript array. I've managed to make it work but I was wondering if there's a way to make the old content/ fade out and the new content/quote fade in with jquery to create a smooth transition.

I've uploaded the code in Code pen

http://codepen.io/kkoutoup/pen/zxmGLE

I would appreciate any help with this.

2 Answers

Luiz Carlos
Luiz Carlos
15,714 Points

Hi friend.

I'm change your code, here is my fork: http://codepen.io/anon/pen/EadVxL.

I commented in the code my changes.

I hope this help you.

Sean T. Unwin
Sean T. Unwin
28,690 Points

Good answer, Luiz.

I was just about to post the same. Good thing I hit refresh before I did. :)

Kostas Koutoupis, I would recommend setting a min-height for #quoteContainer (200px worked nice for me) so the button doesn't move everytime a quote changes. Good stuff! :)

Kostas Koutoupis
Kostas Koutoupis
15,010 Points
Kostas Koutoupis
Kostas Koutoupis
15,010 Points

Sean T. Unwin Thanks very much for the suggestion. Implemented it and it looks so much better!