JQuery анимация при замене изображения

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

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

Ответы

Ответ 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 для получения дополнительной информации о затухающие функции.

Опять же, вы должны предварительно загружать изображения, иначе он может исчезать во время погрузки.

Ответ 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 () {};
  });
});