Javascript 更改链接HREF目的地

我对动画制作有问题

我的网页使用链接上具有动画不透明度的按钮设置动画。 但是当我的不透明度为0时，链接仍然有效，所以如果你点击它们，你仍然会被发送到另一个页面

我希望它在可见之前不可拾取

HTML:

<a id="click1" href="#" class="btn_header">WELCOME</a>

编辑：我希望按钮开始不可见（不工作）和变为可见（工作） 我的猜测是将HREF:#设置为对您应该使用的任何.html文件可见，并在动画结束时显示/隐藏元素

$("#click1").click(function () {
    var target = $('#1');

    if (target.is(':visible')){
       target.fadeOut(500);
    } else {
       target.fadeIn(1250);
    }
});

代码演示（包括起始代码）

---

如果持续时间相同，您也可以使用更简单的

应该使用和，在动画结束时显示/隐藏元素

$("#click1").click(function () {
    var target = $('#1');

    if (target.is(':visible')){
       target.fadeOut(500);
    } else {
       target.fadeIn(1250);
    }
});

代码演示（包括起始代码）

---

如果持续时间相同，您也可以使用更简单的

---

fadeIn/fadeOut

似乎可以完成您的目标，但是如果您想使用

animate

则可以点击回调参数隐藏链接。当你把东西拿回来的时候，记得把它都拆了

  if ($("#1").css("opacity")=="0") {
     $("#1").show().animate({"opacity":"1"}, 1250);
  } else {
     $("#1").animate(
         {"opacity":"0"}, 
         500, 
         function() { 
             $(this).css("display", "none") 
         });
  }

---

fadeIn/fadeOut

似乎可以完成您所追求的目标，但是如果您想使用

动画

，则可以点击回调参数隐藏链接。当你把东西拿回来的时候，记得把它都拆了

  if ($("#1").css("opacity")=="0") {
     $("#1").show().animate({"opacity":"1"}, 1250);
  } else {
     $("#1").animate(
         {"opacity":"0"}, 
         500, 
         function() { 
             $(this).css("display", "none") 
         });
  }

首先，不要以数字开头ID（#1不好-至少使用#a1）

HTML:

首先，不要以数字开头ID（#1不好-至少使用#a1）

HTML:

---

.fadeOut（）的问题是它会在动画结束时删除元素。@Gaby-Hmm，我正忙着处理这个问题，但我希望它开始不可见，然后当您单击链接时变为可见。@ChrisHolstein，您可以使用CSS将元素设为

display:none

，或者运行

$（'#1'）。hide（）

在脚本的开头。在我的网站中添加了一个演示链接answer@JaredGotte，实际上，它通过将显示设置为“无”使元素在结尾处不可访问（实际上并没有将其从DOM中删除），但这正是OP想要的。...fadeOut（）的问题是它在动画结尾处删除元素。@Gaby-Hmm，我正忙着处理这个，但我希望它开始不可见，然后当您单击链接时，链接变为可见。@ChrisHolstein，您可以使用CSS将元素设置为

display:none

，或者在脚本开始时运行

$（'#1'）。hide（）

。在我的网站中添加了一个演示链接answer@JaredGotte，实际上，它通过将display设置为none（实际上并没有将其从DOM中删除），最终使元素无法访问，但这正是OP想要的。谢谢，这使它工作了。我在使用淡入淡出选项时遇到了很多麻烦，因为在Jquery中我是n00b。这不是最好的，因为它会删除你的链接。这意味着它后面的元素将尝试填充该空间。如果你想保持现有的结构，请使用我的答案。它不会删除元素[顺便说一句，也不会淡出]。元素隐藏后仍然可以完全访问。两者都设置

显示：无

。如果您想离开元素框，当然可以使用

可见性：hidden

。谢谢，这使它工作了。我在使用淡入淡出选项时遇到了很多麻烦，因为在Jquery中我是n00b。这不是最好的，因为它会删除你的链接。这意味着它后面的元素将尝试填充该空间。如果你想保持现有的结构，请使用我的答案。它不会删除元素[顺便说一句，也不会淡出]。元素隐藏后仍然可以完全访问。两者都设置

显示：无

。如果您想离开元素框，当然可以使用

可见性：hidden

。

  if ($("#1").css("opacity")=="0") {
     $("#1").show().animate({"opacity":"1"}, 1250);
  } else {
     $("#1").animate(
         {"opacity":"0"}, 
         500, 
         function() { 
             $(this).css("display", "none") 
         });
  }

<a id="click1" href="#" class="btn_header">WELCOME</a>
<div id="a1" style='opacity: 0'>
  <a href="3dsmax.html">link</a>
</div>

$("#click1").click(function () {
  if ($("#a1").css("opacity")=="0") {
    $("#a1").animate({"opacity":"1"}, 1250);
  } else {
    $("#a1").animate({"opacity":"0"}, 500);
  }
});

$('#a1').click(function () {
  if ($(this).css('opacity')=='0') return false;
});