向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文檔： http : //api.jquery.com/animate/