Javascript 向jquery幻灯片添加过渡效果

我创建了一个小滑块

它工作得很好，悬停抛出一个链接，图像改变

现在我需要添加一点效果，当图像改变时，我尝试了以下方法：

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

---

但我看不到任何效果，有人能帮我吗

MozTransition

不正确，应该是

-moz transition

。此外，我认为您不了解转换是如何工作的，您没有在hover上添加此属性，但应该存在于您的基本CSS中。悬停时唯一要更改的是为转换指定的属性，在本例中是

不透明度

CSS

JS

---

请查看更新版本：

一种方法是在背景中放置DIV元素

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

然后使用jQuery动画功能显示/隐藏它们。该示例只是淡出背景。 e、 g.关于第一个背景：

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

---

有关使用其他效果的信息，请参阅jQuery文档：

…添加到代码中，您将看到发生了什么..=>安慰

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

#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")
}

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