Bummer! You must be logged in to access this page.

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 williamrossi
williamrossi
6,232 Points

fading a background image over another

Hi all, I am just starting to use Jquery animations and having a little trouble with how to approach this one.

I have a small container with a background image of 10 grey stick people, I have another image cut out with the same size dimensions but the stick people are coloured in.

I want after 1 second of the page loading to scroll left to show the the greyed out people again.

can't think of how to do this!

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

When you say 'scroll left', do you mean one slides over to the left to show the other?

Because you could combine the two images together (side-by-side) and then use CSS transitions on the background-position property, and just use jQuery to add an additional class to trigger the transition on page load. This also saves one HTTP request since you only load the one image.

Here's an example with a 600 x 400px container with a 1200 x 400px image: http://codepen.io/anon/pen/YPwLLx

Alternatively, if you wanted to fade the 'top' image out, you could layer the two images and transition the opacity property of the top layer from 1 to 0.