Problem with jQuery fadeIn effect
<p>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.While, 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.</p>

<p>Here's the code:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'&gt;&lt;/script&gt;
        &lt;style type="text/css"&gt;
            #wrapper{
                width:400px;
                height:300px;
            }

            .picture{
                width:400px;
                height:300px;
                position:absolute;
            }

            .button{
                background-color:red;
                width:300px;
                height:200px;
            }


        &lt;/style&gt;    
        &lt;script type="text/javascript"&gt;         
            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();
                });             
            }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id='wrapper'&gt;
            &lt;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"&gt;
            &lt;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"&gt;                                   
            &lt;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"&gt;                                                
        &lt;/div&gt;
        &lt;div&gt;
            &lt;a href="javascript:switchPicture(1);"&gt;Picture 1&lt;/a&gt;
            &lt;a href="javascript:switchPicture(2);"&gt;Picture 2&lt;/a&gt;            
            &lt;a href="javascript:switchPicture(3);"&gt;Picture 3&lt;/a&gt;                        
        &lt;/div&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Thanks in advanced.</p>
