淡入背景與jQuery上懸停，然後淡出

我目前使用此代碼來改變我的頁面的CSS3背景，當你將鼠標懸停在一個段落：淡入背景與jQuery上懸停，然後淡出

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

它工作正常，但我想fadIn增加它會更平滑。另外，如果您沒有將鼠標懸停在段落（#web）上，我想淡出新的背景。

來源

2011-08-12 Connor

您可以輕鬆地使用jQuery和jQuery UI實現這一目標並使用製作動畫，而不必使用製作動畫。

的jQuery：

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

只需設置爲oldClass和的NewClass的樣式屬性在你的CSS。（重命名適當）

確保您加載了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/

來源

2011-08-12 16:15:52 RobB

看起來像是在線演示的完美解決方案，但不適用於我的網頁。我真的很困惑... – Connor

你是否也包括jQuery UI框架？ – RobB

我不這麼認爲......這是我加載的內容： – Connor

您可以使用jQueryanimate()來隨着時間的推移動畫CSS變化。

[編輯]

您的代碼應該使用這樣的：從api.jquery.com/animate

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

示例代碼：

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

來源

2011-08-12 16:03:29

你可以添加到我的代碼？我是新來的jQuery，我不知道你的意思是... – Connor

我剛纔試過這個代碼，它不會改變背景......我需要加載另一個jQuery文件 – Connor

你應該只需要'<腳本src =「@ Url.Content（」〜/ Scripts/jquery-1.5.1.min.js「）」type =「text/javascript」>'不管你使用的是什麼版本的jQuery。 –

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

我不認爲你可以淡出的背景下，它下面沒有任何東西。您需要覆蓋。

來源

2011-08-12 16:27:44

這是如此可怕，它得到downvote ?? –

嘿，小提琴很酷！這是我正在談論的。 http://jsfiddle.net/yPBVs/18/ –

@robB我可以知道爲什麼downvote？（猜測，siaiw）我可以猜想我的風格不是超級的，甚至有點模糊，就像我的意思是'覆蓋'，我避免使用jQuery UI，但是再一次，上面的答案都沒有實際的工作，他們不要在後臺淡出圖像。如果你用一個絕對位置的div來代替它，並且用任何你想要的方法淡入淡出，那麼它就可以工作，並且交付OP所要求的。 Ciao，bb –

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

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

來源

2011-08-13 00:02:10 Connor

淡入背景與jQuery上懸停，然後淡出

回答

相關問題