jQuery animare su una sostituzione dell'immagine

Question

spera che possiate consigliare vorrei aggiungere qualche semplice dissolvenza in fuori un sostituto statua che io ho agganciato in una select 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"> 

qualche suggerimento come posso fallo?

Answer 1

Ciò funzionerà meglio se si precaricano le immagini.

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

Questo svanirà l'immagine fuori, cambiare la src, poi dissolvenza nuovamente. Fare riferimento al jQuery docs per ulteriori informazioni sulle funzioni di dissolvenza.

Anche in questo caso, è necessario precaricare le immagini, altrimenti potrebbe svanire durante il caricamento.

Answer 2

sono andato per precaricare l'immagine al caricamento della pagina, piuttosto che al volo ...:

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