Question

我想知道是否可以在更改attr时添加fadeIn效果，例如我有这个代码工作，当用户点击img2时，imgmain的src更改为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();
  });
});

通常，当您有多个项目时，使用类选择器而不是列出项目的ID：

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

JQuery淡入Attr变化

5 个答案: