Добавить эффект перехода на JQuery слайд

Question

Я создал маленький слайдер, http://jsfiddle.net/dGnMX/,

это работает довольно хорошо, паря кинуть ссылку, изменение изображения.

Теперь мне нужно добавить немного эффекта, когда изменение изображения, я попытался это:

$("#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' 
    }); 
}); 

Но я не могу видеть никакого эффекта, может кто-нибудь помочь мне с этим?

Answer 1

MozTransition неверно, должно быть -moz-transition. Кроме того, я не думаю, что вы понимаете, как работают переходы, вы не добавляете это свойство при наведении, но должны существовать в вашем базовом CSS. Единственное, что вы изменяете при наведении, это свойство, указанное вами для перехода, в этом случае - 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

Взгляните на обновленной версии: http://jsfiddle.net/dGnMX/38/

Один из способов заключается в размещении элементов DIV в фоновом режиме.

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

со следующего 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") 
} 

Затем с помощью JQuery анимации функции, чтобы показать/скрыть их. Пример просто угасает на фоне. , например. для первого фона:

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

Смотрите документацию JQuery для использования других эффектов: