jQuery动画替换图像 [英] jQuery animate on an image replacement

问题描述

希望你能建议我想添加一些简单的淡入淡出图像替换，我已经连接到一个选择menu.ie，

Hope you can advise I would like to add some simple fade in out of an image replacement which I have hooked into a select 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">

我有什么建议吗？

推荐答案

如果您预先加载图像，这将最有效。

This will work best if you preload the images.

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

This will fade the image out, change the src, then fade it back in. Reference the jQuery docs for more information on the fading functions.

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

Again, you should preload your images, otherwise it might fade back while still loading.

这篇关于jQuery动画替换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！