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