爲什麼圖像不能用jQuery淡入

我是jQuery的新手，我試圖讓圖像淡入，但不會。有人可以告訴我代碼有什麼問題嗎？在此先感謝爲什麼圖像不能用jQuery淡入

我的HTML頁面看起來像這樣

<!doctype html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".slider#1").fadeIn("slow"); 

}); 
</script> 
<title>slider</title> 
</head> 
<body> 
    <div class="slider" > 
     <img id="1" src="images/mountain.jpg" alt="Mountain"/> 
     <img id="2" src="images/roses.jpg" alt="Roses" /> 
     <img id="3" src="images/vilage.jpg" alt="Village"/> 

    </div> 

</body> 
</html>

和我的CSS代碼

* {margin: 0 padding:0} 

.slider { 
    background-image: url(images/loader.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
    border: 1px solid black; 
    overflow: hidden; 
    width: 700px; 
    height: 400px; 


} 

.slider img { 
    display: none; 
    width: 700px; 
    height: 400px; 
}

來源

2014-01-12 user3188287

使用數字元素 - id =「1」 - 不是個好主意。儘量避免這種情況。 –

作爲@IgorBenikov說：http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – jammykam

我已經回到問題的原始版本;編輯2殲滅了很多信息（我認爲是爲了澄清）。 – shambulator

這段代碼與類slider和的ID 1目標元素：

$(".slider#1").fadeIn("slow");

當你的圖像元素是元素的孩子與slider類，你需要做的這個目標元素與ID 1這與slider類家長：

$(".slider #1").fadeIn("slow");

來源

2014-01-12 21:11:35

@ user3188287你的意思是你得到了破碎的鏈接？檢查你的圖像是否存在，並檢查你的控制檯是否有來自jQuery的錯誤 –

你的jQuery選擇不正確。試試這個：

$(".slider #1").fadeIn("slow");

此外，你的概念我有缺陷。總是最好的，以確保它會顯示你想要的方式之前添加花哨的jQuery調用。現在，嘗試註釋掉淡入呼籲，並暫時將這個CSS類，以確保頁面看起來要如何當圖像是從一開始就可見：

.slider #1 { 
    display: block; 
    width: 700px; 
    height: 400px; 
}

來源

2014-01-12 21:12:01 erikrunia

這似乎就好了工作 - 我做了一個簡化小提琴：http://jsfiddle.net/grahampcharles/TAjPR/。

<div class="slider" > <img id="2" src="http://15pictures.com/wp-content/gallery/15-pictures-roses/roses-2.jpg" alt="Roses" /> </div>

你爲什麼不把你的代碼放到一個小提琴，太 - 沒準這是一個jQuery選擇問題，看代碼的實際工作會更容易解決。

來源

2014-01-12 22:49:43

如果jquery沒有被加載，你會在控制檯中看到很多錯誤 - 是嗎？或者也許404s的圖像文件？ –

您應該將其作爲答案發布。離開協議完成後，您將不會收到有關混合安全和不安全內容的安全警告 - 如果您的網頁通過https加載，CDN內容也將加載。但是我認爲，大多數瀏覽器都需要斜線。您是否在本地查看您的網頁，而無需本地Web服務器？（然後該協議可能是file：//並且CDN內容可能根本無法加載。）另請參閱：http://stackoverflow.com/questions/4659345/is-there-any-downside-for-using-a -leading-雙斜線到繼承最協議-i的 –

爲什麼圖像不能用jQuery淡入

回答

相關問題