我正在尝试为图片实现淡入效果，其中有图片 1、2 和 3。当我按顺序淡入图片时，淡入效果起作用。但是，如果我向后单击图片链接，例如图片 3，然后是图片 2，您将看不到淡入效果。不确定我在这里犯了什么错误。
代码如下:
<html>
<head>
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<style type="text/css">
#wrapper{
width:400px;
height:300px;
}
.picture{
width:400px;
height:300px;
position:absolute;
}
.button{
background-color:red;
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
function switchPicture(id){
visible_image_id = jQuery("img:visible").attr("id");
jQuery("#image_"+id).fadeIn(500,function(){
console.log("visible -" + visible_image_id);
jQuery("#"+visible_image_id).hide();
});
}
</script>
</head>
<body>
<div id='wrapper'>
<img id='image_1' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/lion__11.jpg">
<img id='image_2' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/before_the_fall__39.jpg">
<img id='image_3' class='picture' style="display:block;" src="http://media.smashingmagazine.com/wp-content/uploads/uploader/images/wallpaper-calendar-august-11/hot_august__97.jpg">
</div>
<div>
<a href="javascript:switchPicture(1);">Picture 1</a>
<a href="javascript:switchPicture(2);">Picture 2</a>
<a href="javascript:switchPicture(3);">Picture 3</a>
</div>
</body>
</html>
最佳答案
您遇到了 z-index 问题。问题是，如果你说，显示图像 2，图像 3 已经显示。图片 3 在图片 2 的前面，因此在隐藏 3 之前您将看不到图片 2。 3 在淡入淡出完成之前不会隐藏。您可以通过设置图像的 z-index 来解决这个问题。
function switchPicture(id) {
visible_image_id = jQuery("img:visible").css("zIndex", 0).attr("id");
jQuery("#image_" + id).fadeIn(500, function() {
console.log("visible -" + visible_image_id);
jQuery("#" + visible_image_id).hide();
}).css("zIndex", 1);
}
编辑:一些额外的改进。理想情况下，您应该摆脱 href 中的内联 javascript，并将其替换为点击处理程序。像这样:
$(function() {
$("a").click(function() {
var visible_image_id = jQuery("img:visible").css("zIndex", 0).attr("id");
var new_image_id = "image_" + ($(this).index() + 1);
if(visible_image_id == new_image_id) return false;
jQuery("#" + new_image_id).fadeIn(500, function() {
console.log("visible -" + visible_image_id);
jQuery("#" + visible_image_id).hide();
}).css("zIndex", 1);
return false;
});
});
另请注意，我添加了 if(visible_image_id == new_image_id) return false;。这将修复在您单击可见图像的链接时完全隐藏图像的错误。
要获得额外的奖励积分，您可以将 href 替换为指向非 javascript 页面的 URL。这样，如果用户没有启用 javascript，他们将被带到该页面，但如果启用了 javascript，则会发生预期的行为。
关于javascript - 为什么当我反转顺序时 jQuery fadeIn 效果不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6921147/