在 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>

這就是我將使用的解決方案。 謝謝您的幫助。