Add transition effect to jquery slide

Question

I created a little slider, http://jsfiddle.net/dGnMX/ ,

it works pretty well, hovering throw a link, the image change.

Now i need to add a little effect, when the image change, i tried this:

$("#first").hover(function () {
    $("body").css({
        "background": 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")',
        MozTransition    : 'opacity 2s ease-in-out',
        transition       : 'opacity 2s ease-in-out'
    });
});

But i cant see any effect, anybody could help me with this?

Answer 1

MozTransition is not correct, should be -moz-transition . Furthermore I don't think you understand how transitions work, you don't add this property on hover but should exist in your base CSS. The only thing you change on hover is the property you specified for the transition, in this case is opacity .

CSS

body {
    background: url(...);
    opacity: 0.5;
    transition: opacity 2s linear;
}

JS

$('#first').hover(
   function(){ $('body').css('opacity', 1.0); },
   function(){ $('body').css('opacity', 0.5); }
);

Answer 2

Have a look at the updated version: http://jsfiddle.net/dGnMX/38/

One way is to place DIV elements in the background.

<div id="background1"></div>
<div id="background2"></div>
<div id="background3"></div>

with the following CSS

#background1, #background2, #background3 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -100;
}

#background1 {
    background-image: url("http://static.bbc.co.uk/solarsystem/img/ic/640/collections/space_exploration/space_exploration_large.jpg")
}

#background2 {
    background-image: url("http://i.telegraph.co.uk/multimedia/archive/02179/Milky-Way_2179177b.jpg")
}

#background3 {
    background-image: url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")
}

Then use the jQuery animate function to show/hide them. The example simply fades the backgrounds. eg for the first background:

$("#first").hover(function () {
    $('#background1').animate({opacity: 1}, 'slow');
    $('#background2').animate({opacity: 0}, 'slow');
    $('#background3').animate({opacity: 0}, 'slow');
});

See the jQuery documentation for using other effects: http://api.jquery.com/animate/