JQuery Fade In Attr Change

Question

Мне было интересно, можно ли добавить эффект fadeIn при изменении attr, например, у меня работает этот код, когда пользователь нажимает на img2, src imgmain изменяется на img2 так:

$('#img1').click(function() {
  $("#imgmain").attr("src","img1.jpg");
  });

  $('#img2').click(function() {
  $("#imgmain").attr("src","img2.jpg"); }

  );

Спасибо!

Answer 1

Вы можете изменить его в обратном вызове fadeOut(), например:

$('#img1').click(function() {
  $("#imgmain").fadeOut(function() {
    $(this).attr("src","img1.jpg").fadeIn();
  });
});

Answer 2

$('#img1').click(function() {
  $("#imgmain").fadeOut(function(){
  $(this).attr("src","img1.jpg");
  $(this).fadeIn();
  });
});

Answer 3

или ...!

$('#MRMBIG').fadeOut('slow').attr('src',imgsrcclickshode).fadeIn('slow'); 

Answer 4

Если вы используете ключевое слово this вместе с src, вам не нужно итерировать источник изображения.Например,

$('#img1').click(function() {
  var thisImage = this.src;
  $("#imgmain").fadeOut(function() {
    $(this).attr("src",thisImage).fadeIn();
  });
});

Еще лучше, вы должны дать этим изображениям также имя класса, таким образом, это относится ко всем им.Приведенный выше код будет работать только для первого изображения, в то время как приведенный ниже код, предполагая, что все они имеют большой класс, позволит вам указать все из них

$('.thumb').click(function() {
  var thisImage = this.src;
  $("#imgmain").fadeOut(function() {
    $(this).attr("src",thisImage).fadeIn();
  });
});

Answer 5

В вашем коде есть избыточность.Лучше:

$('#img1, #img2').click(function() {
  var src = $(this).attr("src");
  $("#imgmain").fadeOut(function() {
    $(this).attr("src", src).fadeIn();
  });
});

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

$(".images").click( ...