为 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 animate 函数显示/隐藏它们。该示例只是淡化背景。例如，对于第一个背景：

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

有关使用其他效果的信息，请参阅 jQuery 文档：http://api.jquery.com/animate/