Image SRC Replacement in jQuery

So, just a little note that might save you some time in the future.

If you are using jQuery to replace an image source and you want to use an effect. Don't use hide() and show().

$('img#arrow').hide('fast');

$('img#arrow').attr('src','my_img.png');

$('img#arrow').show('fast');

Those functions change the image display type to none and block, respectively. This could throw off your layout since most images are included in a page inline.
Instead, use fadeOut() and fadeIn() as these functions only effect the image's opacity, not it's display.

$('img#arrow').fadeOut('fast');

$('img#arrow').attr('src','my_img.png');

$('img#arrow').fadeIn('fast');

Hope it helps save you some frustration.

One thought on “Image SRC Replacement in jQuery

  1. Very nice but i am changing captcha image. Click recycle button and change image. I dont understand it and doesnt working :((

Leave a Reply

Your email address will not be published. Required fields are marked *