Change background-image of a div with fade effect every 10 seconds with jquery

Question

I would like to create a slideshow in the header area of my page. It should change the background image every 10 seconds with a nice fade effect. And since I\'m using jQuery

Answer 1

You can fade a background image with CSS3 using transitions.

Check it out at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

For your use, set up jQuery to change the background image, but apply the transition style using CSS. Anytime the background changes, it will transition according to the CSS3 style.

#header
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}