jQuery animar en una imagen de sustitución

Question

espera que usted pueda aconsejar me gustaría añadir un poco de fundido simple en salir de una sustitución de la imagen que he enganchado en un selecto menu.ie,

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

<img id="selectedVehicle" src="/assets/v2/images/select-vehicle.png"> 

alguna sugerencia de cómo puedo ¿hazlo?

Answer 1

Esto funcionará mejor si precarga las imágenes.

$("#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'); 
    }); 
}); 

Esto se desvanecerá la imagen hacia fuera, cambie el src, a continuación, se desvanecen de nuevo en. Hacer referencia a la jQuery docs para obtener más información sobre las funciones de desvanecimiento.

De nuevo, debe precargar sus imágenes, de lo contrario, podría desaparecer mientras se carga.

Answer 2

He ido para precargar la imagen de carga de la página, en lugar de sobre la marcha ...:

$(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() {}; 
    }); 
});