Question

它工作得很好，徘徊投掷链接，图像更改。

现在我需要添加一点效果，当图像改变时，我尝试了这个：

$("#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/

将过渡效果添加到jquery幻灯片

2 个答案: