Why is jQuery fadeIn effect not working when I reverse the order?_问答_开发者

Why is jQuery fadeIn effect not working when I reverse the order?

开发者 https://www.devze.com 2023-03-24 15:00 出处：网络

I am trying to implement fadein effect for the picture, where there\'s picture 1, 2 and 3. When I fadeIn picture following sequence, the fadeIn effect works. However, if I click the picture link in ba

I am trying to implement fadein effect for the picture, where there's picture 1, 2 and 3. When I fadeIn picture following sequence, the fadeIn effect works. However, if I click the picture link in backward, example picture 3 then picture 2, you won't see the fadeIn effect. Not sure what mistake I did here.

Here's the code:

<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-colo开发者_StackOverflow中文版r: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>

You have a z-index issue. The problem is that if you are say, showing image 2 with image 3 already shown. Image 3 is in front of image 2, so you will not see image 2 until 3 is hidden. 3 isn't hidden until after the fade completes. You can fix this by setting the z-index of the images.

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/

EDIT: Some additional improvements. You should ideally get rid of the inline javascript in the href and replace it with a click handler. Something like this:

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

Also note, I added if(visible_image_id == new_image_id) return false;. This will fix the bug where it was hiding the image entirely if you clicked on the link of the visible image.

For extra bonus points, you can replace the href with a URL to a no-javascript page. That way if the user doesn't have javascript enabled, they will be taken to that page but if javascript is on the intended behavior will occur.