Change of Picture through Toggle event

Question

I have two pictures. one arrow_right.png and arrow_left.png. I want to display Only one picture. If Clicked then Toggles to another picture. Can you please help me how to it with jQuery toggle() function. Because it is hiding my picture.

Answer 1

$('img').toggle(
    function () {
        $(this).attr('src', 'arrow_left.png');
    },
    function () {
        $(this).attr('src', 'arrow_right.png');
    }
);

Docs for .toggle(): http://api.jquery.com/toggle

Here is a demo: http://jsfiddle.net/dQZfh/

Update

You can also animate the change between each image by using .animate() or some of the pre-build animations:

$('img').toggle(
    function () {
        $(this).stop().fadeTo(250, 0, function () {
            $(this).attr('src', 'http://chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg').fadeTo(250, 1);
        });
    },
    function () {
        $(this).stop().fadeTo(250, 0, function () {
            $(this).attr('src', 'http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg').fadeTo(250, 1)
        });
    }
);

Notice that I used the callback function for fadeTo to change the source only after the image has faded-out completely.

Here is a demo (fade): http://jsfiddle.net/dQZfh/1/

Here is a demo (slide): http://jsfiddle.net/dQZfh/2/