jQuery fadeTo和fadeIn無法在除JSFiddle之外的任何地方工作

我似乎無法獲得即使在Chrome或Safari瀏覽器上工作的簡單淡入效果 - 但它與jsfiddle完美兼容（Chrome 19.0.1084.56 & Safari 5.1。 7）。我也沒有得到任何JavaScript錯誤工作。以前我曾試圖jQuery fadeTo和fadeIn無法在除JSFiddle之外的任何地方工作

$（「＃變臉」）。隱藏（）。淡入

這的jsfiddle但不是在我的文件也能正常工作。有趣的是，當我使用它時，fadeOut可以正常工作。

下面是我的代碼如下 - 它適合你嗎？如果您有任何想法，爲什麼它不適合我，請讓我知道！

<html> 

<head> 

<title>Wheee jQuery!</title> 

<!-- jquery --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

$("#fade").fadeTo(2000, 1); 

</script> 

<!-- css --> 
<style type="text/css"> 
#fade{ 
    width: 150px; 
    height: 30px; 
    text-align: center; 
    color: blue; 
    border: 1px dotted blue; 
    opacity: 0.3; 
} 
</style> 

</head> 

<body> 


<div id="fade"> 
lalala 
</div> 

</body> 

</html>

來源

2012-06-13 spops

使用'$（文件）。就緒（函數（）{/ * mycode的* /}）;'（進入8個回答）默認情況下的jsfiddle代碼在窗口負荷運行，而不是在頭部解開。 –

在div被呈現之前，您已經調用了'fadeTo'方法，要麼將該調用移動到低於'

lalala

'的位置，要麼調用'$（document）.ready（function（）{}）中的方法' – Wiz

默認情況下，具有的jsfiddle選擇OnLoad運行在body.onload事件內的JavaScript面板內找到的代碼。另一方面，你的代碼運行解開頭部的代碼。要在JSFiddle中模擬這種情況，請選擇No Wrap而不是OnLoad，您的代碼會突然無法工作，就像在服務器上一樣。

爲了解決這個問題，沒有包裹包裝你的代碼中

$(document).ready(function(){ 
    $("#fade").fadeIn(2000); 
});

樣品的jsfiddle的：http://jsfiddle.net/3cXvL/1/

另一種解決方案是，它需要影響DIV之後，將您的代碼。

<div id="fade"></div> 
<script> 
    $("#fade").fadeIn(2000); 
</script>

來源

2012-06-13 21:52:27

希望downvote不是你的，因爲當你評論時，我已經開始了小提琴;}爲了搜索目的，發佈完整的代碼是很好的。 –

@ChristopherMarshall事實並非如此，我投你的票，只是懶得把它當作自己的答案。 –

「使用$(document).ready(function(){/*mycode*/});（傳入8個答案）」 - 凱文。

適合我。 http://jsfiddle.net/3cXvL/

$(document).ready(function() { 
    $("#fade").fadeTo(2000, 1); 
});

來源

2012-06-13 21:45:44

現在完美工作，謝謝！ – spops

應該選擇Kevins接受答案。歡迎來到StackOverflow！ –

jQuery fadeTo和fadeIn無法在除JSFiddle之外的任何地方工作

回答

相關問題