图像替换上的 jQuery 动画答案

【问题标题】：jQuery animate on an image replacement图像替换上的 jQuery 动画
【发布时间】：2011-02-14 05:36:01
【问题描述】：

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

$("#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">

有什么建议吗？

【问题讨论】：

标签： jquery image animation

【解决方案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了解有关淡入淡出功能的更多信息。

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

【讨论】：

如果我在 img fadeIn/fadeOut 之间夹入一个动画加载 gif 淡入/淡出，这样我就不会预加载图像，并在图像完全加载时淡入图像，这会是一件有意义的事情吗加载了吗？

【解决方案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 () {};
  });
});

【讨论】：

【解决方案3】：

“加载”事件示例：

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

【讨论】：

image.on("load",function(){ image.fadeIn('fast'); });
Krishna Karki，你能评论一下为什么使用.on 更好吗？
我认为她认为是错字，但实际上并非如此......https://api.jquery.com/one/