代码之家 › 专栏 › 技术社区 › Doug Molineux

JQuery淡入属性更改

fadein jquery

Doug Molineux · 技术社区 · 15 年前

我想知道当attr改变时是否可以添加fadeIn效果,例如,当用户点击img2 imgmain的src改变为img2的时候,我让这个代码工作:

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

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

  );

5 回复 | 直到 15 年前

Nick Craver 15 年前

你可以在 fadeOut() 回拨,如下所示:

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

armonge 15 年前

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

sth 15 年前

或者。。。!

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

dockeryZ Yacoby 15 年前

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

Å ime Vidas Zim84 15 年前

你的代码有冗余。更好:

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

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