图像替换上的 jQuery 动画

Question

希望你能建议我想添加一些简单的淡入图像替换，我已经将其挂接到选择菜单中，

$("#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有关淡入淡出功能的更多信息。

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