为什么图像不能用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淡入

回答

相关问题