在 hover 上使用 jQuery 淡入背景，然后淡出

Question

我目前正在使用此代码更改我的页面的 css3 背景，当您在一个段落上使用 hover 时：

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

它工作正常，但我想在其中添加 fadIn 以使其更流畅。 另外，当您没有将鼠标悬停在段落（#web）上时，我想将新背景淡化回旧背景。

Answer 1

您可以使用jQuery animate()为 css 随时间的变化设置动画。

[编辑]

您的代码应使用以下内容：

$(function() {
    $('#web').hover( function() {
        $('html').animate({
            background: #000 url("space-image.png") center center fixed no-repeat
        }, 5000, 
        function() {
            // Animation complete.
        });
    });
});

来自api.jquery.com/animate的示例代码：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

Answer 2

您可以使用 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/

Answer 3

$('#web').hover( 
    function() { $("#myOverlay").fadeIn(); }, 
    function() { $("#myOverlay").fadeOut(); }
});

我不认为你可以淡化背景，它下面没有任何东西。 你需要一个覆盖。

Answer 4

<script>
$(document).ready(function(){
$("#f1_container").hover(function(){
$("body").switchClass('load', 'webbg', 950);
},
function(){
$("body").switchClass('webbg', 'load', 950);
});
});
</script>
<script>
$(document).ready(function(){
$("#f1_container2").hover(function(){
$("body").switchClass('load', 'photobg', 950);
},
function(){
$("body").switchClass('photobg', 'load', 950);
});
});
</script>

这就是我将使用的解决方案。 谢谢您的帮助。