Fatal编程技术网
  • javascript/
  • Javascript jQuery fadeIn效果的问题

Javascript jQuery fadeIn效果的问题

javascript jquery

Javascript jQuery fadeIn效果的问题,javascript,jquery,Javascript,Jquery,我正在尝试为图片实现fadein效果，其中有图片1、2和3。当我按顺序fadeIn图片时，fadeIn效果起作用。而如果我向后单击图片链接，示例图片3，然后单击图片2。您将看不到fadeIn效果。不知道我在这里犯了什么错误 代码如下： <html> <head> <script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></scr

我正在尝试为图片实现fadein效果，其中有图片1、2和3。当我按顺序fadeIn图片时，fadeIn效果起作用。而如果我向后单击图片链接，示例图片3，然后单击图片2。您将看不到fadeIn效果。不知道我在这里犯了什么错误

代码如下：

<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>


#包装纸{
宽度：400px；
高度：300px；
}
.图片{
宽度：400px；
高度：300px；
位置：绝对位置；
}
.按钮{
背景色：红色；
宽度：300px；
高度：200px；
}
功能开关图片（id）{
visible_image_id=jQuery（“img:visible”）.attr（“id”）；
jQuery（“#image"+id）.fadeIn（500，function（）{
console.log（“可见-”+可见图像\u id）；
jQuery（“#”+可见图像_id）.hide（）；
});             
}
感谢您的高级支持。

您有一个z索引问题。问题是，如果你是说，显示图像2与图像3已经显示。图像3位于图像2的前面，因此在隐藏图像3之前，您不会看到图像2。3在淡入淡出完成后才隐藏。您可以通过设置图像的z索引来解决此问题

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\u image\u id==new\u image\u id）返回false。这将修复在单击可见图像链接时完全隐藏图像的错误


为了获得额外的积分，您可以将href替换为指向无javascript页面的URL。这样，如果用户没有启用javascript，他们将被带到该页面，但如果javascript处于预期状态，则会发生行为。
您没有使用bajillion jQuery插件的任何特定原因？我为自定义目的构建此插件，发现从头开始构建会更快，但陷入了这个问题。我想当你不得不停下来解决问题时，它不会那么快。是的，你是对的。但是，有很多插件可供选择，我必须在以后的阶段对其进行自定义。投票通过，删除了我的答案，但如果你能将其变成一个点击处理程序，并摆脱内联函数调用，那就太好了。@kingjiv，这是救世主！我很晚才发现这可能是订购问题，但你们展示得太精确了。非常感谢你@卡里姆79好吧，就为了你！我还修复了连续两次单击同一链接的问题。@kingjiv-Nice！你完全增加了线程的价值。您应该将其添加到您的答案中，以将其变成“rep farming robot”：D@karim79哈，我想我会继续添加它。