jQuery动画替换图像

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

$("#vehicle").change(function(){ var selected = $(this).val(); $("#selectedVehicle").attr('src', '/assets/images/mini/'+selected+'.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文档以获取有关淡入淡出函数的更多信息。

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

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

Answer 3

“load”事件的示例：

 $("#vehicle").on('change', function(){ var selected = $(this).val(); var image = $("#selectedVehicle"); image.fadeOut('fast', function () { image.attr('src', '/assets/images/mini/'+selected+'.png'); }); image.one("load",function(){ image.fadeIn('fast'); }); });