为jQuery幻灯片添加过渡效果答案

【问题标题】：Add transition effect to jquery slide为jQuery幻灯片添加过渡效果
【发布时间】：2014-03-05 21:40:16
【问题描述】：

效果很好，悬停扔一个链接，图片就变了。

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

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

但是我看不到任何效果，有人可以帮助我吗？

【问题讨论】：

标签： javascript jquery slide effect

【解决方案1】：

查看更新版本：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/

【讨论】：

【解决方案2】：

MozTransition 不正确，应该是-moz-transition。此外，我认为您不了解转换的工作原理，您不会在悬停时添加此属性，但应该存在于您的基本 CSS 中。您在悬停时唯一更改的是您为过渡指定的属性，在本例中为 opacity。

CSS

body {
    background: url(...);
    opacity: 0.5;
    transition: opacity 2s linear;
}

$('#first').hover(
   function(){ $('body').css('opacity', 1.0); },
   function(){ $('body').css('opacity', 0.5); }
);

【讨论】：

...添加到代码中，你会看到发生了什么...... => 控制台