I’ve been using jQuery for some days now, just trying to get use to it really. So, I thought its about time I built myself a new personal showcase/portfolio website and I’m currently working on an interactive showcase, where it shows a piece of work, and the user presses the next button to move show the next piece of work.
The ‘work’ is set in a div with the background set of an image (which is the actual ‘work’).
Basically, I want to know if its possible to fade out a CSS background image, replace it, and then fade in?
I’m thinking about using different divs for each of my work, each with a unique css, with a dsiplay:none and using jQuery to fade in each work when the users clicks ‘next’. But that might become a bit messy if I have over 50 piece of work to show. So I was just wondering if I can have one div, with one css, and use jQuery to fade out the css background image, replace, and fade in.
I haven’t actually built my code yet as I’m still in the ‘idea’ stage :-/
Thanks in advanced!
The advantage of having a different element per picture is that the browser will preload the images, and make the application appear more responsive, if you face in another background you’d potentially be loading that just in time, and it might be noticible during the transition, especially on lower speed connections. My thinking is the div approach is better anyway.