How can I give slide effect to image when changing source of image dynamically

Question

Im changing image source from javascript like

<img src="image1.gif" name="imagename">

//Array
img[0]='image1.gif'
img[1]='image2.gif'
...

//onclick event changing img src 
document.images[imagename].src = img[1]

Its working fine. How can I give it a slide effect to image when changing source of image? I can use jquery.

Answer 1

There is a jQuery plugin that should do the trick, I use it all of the time and it is very easy to get to grips with. http://jquery.malsup.com/cycle/

Answer 2

Not entirely sure what you're trying to do here, but if this is just for one element then it should be simple.

$('img').click(function() {
    var current = $(this);

    current.slideUp(300, function() {
        current.attr('src', 'http://imgs.xkcd.com/comics/conditional_risk.png').load(function() {
            current.slideDown(300);
        });
    });
});

This will cause the image's source to change before sliding it down when the image is loaded.

See it live here: http://jsfiddle.net/FvdCd/1/