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

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

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

示例＆＃34; load＆＃34;事件：

$("#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');
  });
});

jQuery动画替换图像

3 个答案: