JQuery Fade In Attr Change

Question

I was wondering if it is possible to add the fadeIn effect when attr changes, for example, this code works for me when the user presses img2 imgmain src changes to img2 as follows:

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

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

  );

Thank!

Answer 1

You can change it to a callback fadeOut(), for example:

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

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();
  });
});

Usually, when you have multiple elements, you use a class selector instead of specifying element identifiers:

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