How to toggle two images dynamically using JQuery.?

User can toggle two images dynamically with out refresh the page, for that we can use JQuery, code snippet below,

HTML 

        <div id="pdiv" >
            <img id="slidimg" src="img1.jpg" alt="image1" width="186" height="448" />
        </div>

JQuery

                    $("#pdiv").click(
                    function() {
                        $("#pdiv").fadeToggle("slow", "swing",
                        function() {
                            $("#slidimg").attr("src", function(i, oldSrc) {
                            return oldSrc == 'img1.jpg' ? 'img2.jpg' : 'img1.jpg';                              
                            });
                            $("#pdiv").fadeToggle("slow", "swing");  
                        });
                    }
                );

DEMO
click below image to toggle the image