jQuery animate on an image replacement

This will work best if you preload the images.

$("#vehicle").change(function(){    var selected = $(this).val();    var image = $("#selectedVehicle");    image.fadeOut('fast', function () {        image.attr('src', '/assets/images/mini/'+selected+'.png');        image.fadeIn('fast');    });});

This will fade the image out, change the src, then fade it back in. Reference the jQuery docs for more information on the fading functions.

Again, you should preload your images, otherwise it might fade back while still loading.

I've gone for preloading the image on page load, rather than on the fly...:

$(document).ready(function () {  function buildUrl(val) {    return '/assets/images/mini/' + val + '.png';  };  $('#vehicle').change(function () {    var value = $(this).val();    $('#selectedVehicle').fadeOut('fast', function () {      $(this).attr('src', buildUrl(value)).fadeIn('fast');    });  }).children('option').each(function () {    var img = document.createElement("img");    img.src = buildUrl($(this).val());    img.onload = function () {};  });});

Example with "load" event:

$("#vehicle").on('change', function(){  var selected = $(this).val();  var image = $("#selectedVehicle");  image.fadeOut('fast', function () {     image.attr('src', '/assets/images/mini/'+selected+'.png');  });  image.one("load",function(){    image.fadeIn('fast');  });});