jQuery를 어떻게 내가 할 수있는,

Question

당신은 내가이 선택 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"> 

어떤 제안을 애니메이션 해?

Answer 1

이미지를 미리로드하면 가장 효과적입니다.

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

이

이 후 다시 페이드 상기 src 변경 이미지를 페이드 아웃된다. 페이징 기능에 대한 자세한 내용은 jQuery docs 참조.

다시 이미지를 미리로드해야합니다. 그렇지 않으면 이미지가로드되는 동안 페이드 백 될 수 있습니다.

Answer 2

나는 ... 오히려 즉석에서보다 페이지로드의 이미지를 사전로드에 대한 갔어요 :

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