jQuery fadeIn切换SVG后嵌入链接不生效仍触发动画问题咨询

解决思路 #

你的问题核心是初始绑定的点击事件没有被移除，所以图片切换完成后点击仍然会触发原有淡入淡出逻辑。只需要在所有图片切换完成后，解绑原有点击事件，再绑定跳转逻辑即可。

完整修改后的JS代码

// 提前定义每张图片切换后的跳转链接，按自身实际需求修改即可
const jumpUrls = {
  img: "替换为img对应跳转地址",
  img1: "替换为img1对应跳转地址",
  img2: "替换为img2对应跳转地址"
}

$(function() { 
  // 统一封装切换完成后的逻辑
  function afterSwitch() {
    // 移除所有图片原有点击事件
    $("#img, #img1, #img2").off("click");
    // 绑定新的跳转点击事件
    $("#img, #img1, #img2").click(function() {
      window.location.href = jumpUrls[this.id];
    })
  }

  // 第一个logo点击逻辑
  $("#img").click(function() {
    $("#img").fadeOut(100, function() {
      $(this).attr('src', "https://picsum.photos/010").fadeIn()
      $("#img1").fadeOut(100, function() {
        $(this).attr('src', "https://picsum.photos/020").fadeIn()
        $("#img2").fadeOut(100, function() {
          $(this).attr('src', "https://picsum.photos/030").fadeIn(function() {
            // 所有图片切换完成后执行后续处理
            afterSwitch();
          })
        })
      })
    })
  })

  // 第二个logo点击逻辑
  $("#img1").click(function() {
    $("#img").fadeOut(100, function() {
      $(this).attr('src', "https://picsum.photos/040").fadeIn()
      $("#img1").fadeOut(100, function() {
        $(this).attr('src', "https://picsum.photos/050").fadeIn()
        $("#img2").fadeOut(100, function() {
          $(this).attr('src', "https://picsum.photos/060").fadeIn(function() {
            afterSwitch();
          })
        })
      })
    })
  })

  // 第三个logo点击逻辑
  $("#img2").click(function() {
    $("#img").fadeOut(100, function() {
      $(this).attr('src', "https://picsum.photos/070").fadeIn()
      $("#img1").fadeOut(100, function() {
        $(this).attr('src', "https://picsum.photos/080").fadeIn()
        $("#img2").fadeOut(100, function() {
          $(this).attr('src', "https://picsum.photos/090").fadeIn(function() {
            afterSwitch();
          })
        })
      })
    })
  })
});

代码说明

• 无需修改原有HTML结构，直接替换原有的JS代码即可生效
• 核心用到jQuery的.off('click')方法，会清除元素上之前绑定的所有点击事件，避免原有淡入淡出逻辑重复触发
• 逻辑触发时机放在最后一张图片的fadeIn回调中，保证所有图片切换完成后才会替换点击行为

内容的提问来源于stack exchange，提问作者D Sand