JQuery анимировать на замену изображения

Question

Надеюсь, вы можете посоветовать, я хотел бы добавить несколько простых переходов из замены изображения, которые я подключил в 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">

какие-либо предложения, как я могу это сделать?

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

Пример с событием «загрузка»:

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