jQuery animowania na zastąpienie obrazu

Question

nadzieję, że można doradzić chciałbym dodać kilka prostych pojawiania obecnie na wymianie obraz, który mam podpięty do wybranej 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"> 

jakieś sugestie jak mogę Zrób to?

Answer 1

To zadziała najlepiej, jeśli wstępnie załadujesz obrazy.

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

ten zniknie obraz na zewnątrz, zmień src, wtedy znikną go ponownie. Odnośnik do jQuery docs uzyskać więcej informacji na temat funkcji blaknięcie.

Powtórz, powinieneś wstępnie załadować swoje obrazy, w przeciwnym razie może zanikać podczas ładowania.

Answer 2

Poszedłem do wstępnego ładowania obrazu na stronie obciążenia, niż w locie ...:

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