jQuery-如何在按钮悬停时淡化背景图像

Question

我想创建一个具有全屏背景图像的页面。 我在顶部有一个菜单栏-悬停每个按钮时，背景图像确实会改变。

现在过渡有点“困难”（在chrome中，它甚至以某种方式闪烁）-所以我想在悬停按钮时创建一个平滑过渡。

onmouseover：将身体背景图像淡化为新的

我知道可以使用JQuery，但是很遗憾，我无法使其正常工作。 非常感谢您的帮助。

我目前所拥有的是： http : //jsfiddle.net/3aDhL/

的CSS

body {
font-family: 'Roboto', 'verdana';
color: black; 
background-color: #000000;
background: url(http://lorempixel.com/output/abstract-q-c-640-480-9.jpg) no-repeat center center fixed;
background-size: cover;
}

脚本

function swapNews(){    document.body.style.backgroundImage="url(http://lorempixel.com/output/abstract-q-c-640-480-2.jpg)";
}

function swapKurse(){   document.body.style.backgroundImage="url(http://lorempixel.com/output/abstract-q-c-640-480-10.jpg)";
}

function swapUberuns(){     document.body.style.backgroundImage="url(http://lorempixel.com/output/abstract-q-g-640-480-4.jpg)";
}

的HTML

<div id="menu">
    <ul id="Navigation">
        <li><a href="#" onmouseover="swapNews()">NEWS</a></li>
        <li><a href="#" onmouseover="swapKurse()">KURSE</a></li>
        <li><a href="#" onmouseover="swapUberuns()">&Uuml;BER UNS</a></li>
    </ul>
</div>

来自瑞士的问候

-米罗

Answer 1

我在JSFiddle中为body标签添加了以下CSS3（如果您可以选择CSS3）属性：

transition-property: background;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0.2s;

确保缓存图像以获得最佳效果。