jQuery, анимационный на замене изображения

Question

jQuery, анимационный на замене изображения

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

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

30

jquery image animation

задан Benjamin 5 February 2014 в 15:33

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

ответ дан 27 November 2019 в 23:49

Другие вопросы по тегам:

jquery image animation

Похожие вопросы:

score 53 · Accepted Answer

Лучше всего это будет работать, если вы предварительно загрузите изображения.

$("#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 для получения дополнительной информации о функциях затухания.

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