jquery - 悬停时使用 jQuery 淡入背景，然后淡出

Question

当您将鼠标悬停在段落上时，我当前正在使用此代码来更改页面的 css3 背景:

$(function(){
    $('#web').hover( function(){
          $('html').css('background', '#000 url("space-image.png") center center fixed no-repeat');
     });
});

它工作正常，但我想添加 fadIn 到它，这样它会更平滑。另外，当您没有将鼠标悬停在该段落 (#web) 上时，我想将新背景淡入旧背景。

Answer 1

您可以通过使用 jQuery 和 jQuery UI 轻松实现此目的，并对类进行动画处理，而不必使用 SwitchClass 对各个属性进行动画处理。 .

jQuery:

$(document).ready(function(){
    $("#f1_container").hover(function(){
        $("body").switchClass('load', 'webbg', 100);
    },
    function(){
        $("body").switchClass('webbg', 'load', 100);
    });
});

只需在 CSS 中设置 oldClass 和 newClass 的样式属性即可。 (适当重命名)

确保您正在加载 jQuery UI 库:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

工作示例:http://jsfiddle.net/yPBVs/