jQuery在jsFiddle中工作，但不在html中

你好，我覺得自己像一個完全白癡，我相信我只是遲到了...但我無法得到這個工作。在jsFiddle它奇妙的工作，但是當我把它放在我的html文件上它不會。請幫忙！我不知道錯誤在哪裏。先謝謝你！這裏是我的html：jQuery在jsFiddle中工作，但不在html中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="test-isla.css" type="text/css" /> 

</head> 

<body> 
<div id="back"> 
<div class="red" id="div1"></div> 
<div class="red1" id="div2"></div> 
<div class="red2" id="div3"></div> 
</div> 
<div id="content"><p>Body Content goes here!!</p></div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     function startfade(){ 
     $("#div3").fadeIn(3000, function(){ 
      $(this).delay(2000).fadeOut(); 
      $("#div2").fadeIn(3000, function(){ 
       $(this).delay(2000).fadeOut(); 
       $("#div1").fadeIn(3000, function(){ 
        $(this).delay(1000).fadeOut(); 
       }); 
     }); 
     }); 

     } 
     setInterval(function() { 
       startfade(); 
     }, 9000); 
     startfade(); 
     }); 
</script> 
</body> 
</html>

這裏是我想在jsFiddle上實現的最終結果，它的工作原理！ http://jsfiddle.net/liveandream/TCCn8/46/

預先感謝您！

來源

2012-02-21 lov2code

嘗試[運行]在jsFiddle中的小提琴，然後使用代碼http://jsfiddle.net/draft/ 這將給你在jsFiddle上使用的確切代碼。這一定會奏效。

來源

2012-02-22 00:54:54 zalun

你真棒，我不知道什麼可能會導致我的問題，但這工作完美！謝謝！ – lov2code 2012-02-22 03:05:00

如果我將CSS複製並粘貼到HTML中，它對我有用。我想你的網頁沒有找到CSS。檢查FireBug以確認它正在查找您的CSS文件。

奇怪的是，當我從SO複製代碼。最後一個startfade();後面出現一個問號，它不是可見的字符。這就是我看到的：

startfade();?

FireBug的Javascript控制檯抱怨過它。

來源

2012-02-21 05:00:57

我做了，它找到了正確的..這是如此愚蠢。我不明白爲什麼它不起作用。 – lov2code 2012-02-21 05:04:05

本着遲到的精神，是不是緩存一箇舊版本的CSS - 用Ctrl + F5強制刷新。不知道還有什麼可能是錯的... – 2012-02-21 05:05:46

更新了我的答案 – 2012-02-21 05:07:47

我不記得腳本標記在被包含在主體中時是否被阻塞。有什麼可以阻止你將jQuery引用移動到頭部嗎？

另外，由於您自己的腳本無論如何都在使用文檔就緒功能，因此您可能不會在身體關閉標記之前使用它。由於它在那裏，因此您可以省去文檔就緒功能，因爲在腳本運行時，您所引用的節點已經添加到DOM中。

來源

2012-02-21 05:18:27

儘量安排你的代碼1

把這個頭標記

<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
</head>

而且首先嚐試將CSS頭了。使用

<style></style>

來源

2012-02-21 05:21:15 Bert

把CSS放在同一個文件夾中，並刪除questionmark，它會工作！

來源

2012-02-21 05:23:52 elrado

the folowing example work perfectly. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
#content{ 
position: relative; 
z-index: 999;} 
#back{ 
    position: absolute; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    padding:0; 
    margin-top: 0px; 
    z-index: 1; 
} 

.red{ 
background: red; 
    width: 800px; 
    height: 800px; 
    overflow: hidden; 
    display: none; 
    position: absolute; 
    z-index: 1; 
} 
.red1{ 
background: green; 
    width: 800px; 
    height: 800px; 
    display: none; 
    position: absolute; 
    overflow: hidden; 
    z-index: 1; 
} 
.red2{ 
background: blue; 
    width: 800px; 
    overflow: hidden; 
    height: 800px; 
    display: none; 
    position: absolute; 
    z-index: 1; 
} 
</style> 
</head> 
<body> 
<div id="back"> 
<div class="red" id="div1"></div> 
<div class="red1" id="div2"></div> 
<div class="red2" id="div3"></div> 
</div> 
<div id="content"><p>Body Content goes here!!</p></div> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     function startfade(){ 
     $("#div3").fadeIn(3000, function(){ 
      $(this).delay(2000).fadeOut(); 
      $("#div2").fadeIn(3000, function(){ 
       $(this).delay(2000).fadeOut(); 
       $("#div1").fadeIn(3000, function(){ 
        $(this).delay(1000).fadeOut(); 
       }); 
     }); 
     }); 

     } 
     setInterval(function() { 
       startfade(); 
     }, 9000); 
     }); 
</script> 
</body> 
</html>

來源

2013-07-02 04:42:58

jQuery在jsFiddle中工作，但不在html中

回答

相關問題