web-dev-qa-db-fra.com

jQuery animer sur un remplacement d'image

J'espère que vous pourrez me renseigner. J'aimerais ajouter un fondu enchaîné simple à un remplacement d'image que j'ai raccordé à un menu sélectionné.

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

des suggestions comment je peux le faire?

jqueryimageanimation
28
Lee

Cela fonctionnera mieux si vous préchargez les images.

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

Cela fera disparaître l’image, changera la src, puis la fera revenir en arrière. Référencez le jQuery docs pour plus d’informations sur les fonctions de fondu.

Encore une fois, vous devez précharger vos images, sinon elles risquent de disparaître pendant le chargement.

48
Matt

J'ai opté pour le préchargement de l'image au chargement de la page plutôt qu'à la volée ...:

$(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
Matt

Exemple avec l'événement "load":

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