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文档以获取有关淡入淡出函数的更多信息.

同样,您应该预先加载图像,否则它可能会在加载时淡出.