已解决! css img display:none 与新添加的元素冲突。 非常感谢大家。
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link type="text/css" href="galerina.css" rel="stylesheet"/>
</head>
<body>
<div class="galerina">
<img class="img1" src="images/1.jpg" alt=""/>
<img class="img2" src="images/2.jpg" alt=""/>
<img class="img3" src="images/3.jpg" alt=""/>
<img class="img4" src="images/4.jpg" alt=""/>
<p/>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="galerina.js"></script>
</body>
</html>
CSS:
div.galerina{
max-width: 500px;
position: relative;
}
div.galerina img{
margin: auto;
display: none;
opacity: 0;
}
div.galerina img.img1{
display: block;
opacity: 1;
}
JS:
$("div.galerina").each(function(){
var gal=$(this);
var size=$(gal).children("img").size();
var i=0;
$(gal).children("img").each(function(){
var img=$(this);
$(gal).append("<img src='images/bullet.png'/>").click(function(){
img.stop().animate({opacity:0},300);
img.css({display:none});
})
})
})
页面加载时没有元素符号？？为什么？？
最佳答案
好吧，您可以做很多事情来改进代码。正如我在评论中所说，避免缓存可以直接访问的值，并学习使用像 fadeOut() 这样的方法。而不是自己完成所有工作。
根据这些准则进行一些重构(如果我正确理解您要实现的目标)，您的代码将变为:
$("div.galerina").each(function() {
$(this).children("img").before("<img src='images/bullet.png'/>")
.click(function() {
$(this).prev().andSelf().fadeOut(300);
});
});
关于jquery 不会将元素附加到页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5695635/