JQuery 淡入属性更改

发布于 2024-10-02 02:33:41 字数 284 浏览 2 评论 0原文

我想知道当 attr 更改时是否可以添加 fadeIn 效果，例如我有此代码工作，当用户单击 img2 imgmain 的 src 更改为 img2 时，如下所示：

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

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

  );

谢谢！

原文

I was wondering if it was possible to add a fadeIn effect when an attr is changed for example I have this code working, when the user clicks on img2 imgmain's src is changed to img2's like this:

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

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

  );

Thank you!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑叹一世浮沉 2024-10-09 02:33:41

您可以在 fadeOut() 回调中更改它，如下所示：

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

You can change it on the fadeOut() callback, like this:

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

回复收藏 0 原文

你的心境我的脸 2024-10-09 02:33:41

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

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

回复收藏 0 原文

⒈起吃苦の倖褔 2024-10-09 02:33:41

或者...！

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

or...!

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

回复收藏 0 原文

离笑几人歌 2024-10-09 02:33:41

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

If you use the this keyword along with src, you don't have to iterate the image's source. For example

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

Better yet, you should give these images a classname also, this way it applies to them all. The above code will only work for the first image, while the code below, assuming they all have a class of thumb, will let you specify all of them

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

回复收藏 0 原文

迟到的我 2024-10-09 02:33:41

您的代码中有冗余。更好：

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

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

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

You have redundancy in your code. Better:

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

Usually, when you have multiple items, you use the class selector instead of listing the IDs of the items:

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

回复收藏 0 原文

~没有更多了~