jQuery animieren auf ein Bild Ersatz

Question

Hoffnung, die Sie beraten kann ich möchte einige einfache Einblendung aus einem Bild Ersatz hinzufügen, die ich in einem ausgewählten menu.ie angeschlossen haben,

$("#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"> 

irgendwelche Vorschläge, wie ich kann, TU es?

Answer 1

Dies funktioniert am besten, wenn Sie die Bilder vorab laden.

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

Dadurch wird das Bild ausgeblendet, die src ändern, dann verblassen wieder in. Verweisen Sie auf die jQuery docs für weitere Informationen über die Fading-Funktionen.

Auch hier sollten Sie Ihre Bilder vorab laden, da sie sonst beim Laden wieder verschwinden.

Answer 2

Ich habe für Vorbelastung des Bildes auf Seite laden gegangen, anstatt im Fluge ...:

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