Question

我正在尝试为图片实现淡入淡出效果，其中有图片1,2和3.当我淡入图片后面的序列时，淡入淡出效果会起作用。但是，如果我单击后面的图片链接，示例图片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>

先谢谢。

Answer 1

您有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);
}

http://jsfiddle.net/7kQWG/

编辑：一些额外的改进。理想情况下，你应该摆脱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;
    });
});

http://jsfiddle.net/7kQWG/1

另请注意，我添加了if(visible_image_id == new_image_id) return false;。如果您点击可见图像的链接，这将修复它完全隐藏图像的错误。

对于额外的奖励积分，您可以使用URL替换href页面以获取非javascript页面。这样，如果用户没有启用javascript，他们将被带到该页面，但如果javascript处于预期的行为将会发生。

jQuery fadeIn问题

1 个答案: