更改链接 HREF 目标

Change a links HREF destination

本文关键字：目标 HREF 链接      更新时间：2023-09-26

我在制作动画时遇到问题。

我的网页使用按钮进行动画处理，这些按钮在链接上具有动画不透明度。但是当我的不透明度为 0 时，链接仍然有效，因此如果您单击它们，您仍然会被发送到另一个页面。

我希望它在可见之前是不可点击的。

.HTML：

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

触发此

<div id="1">
<a href="3dsmax.html"><img class="tile" src="#"></a>
</div>

.JS：

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

编辑：我希望按钮开始不可见（不工作）并变为可见（工作）我的猜测是使 HREF：# 以及当您单击按钮使其对任何内容可见时.html

您应该使用在动画结束时显示/隐藏元素的.fadeIn()和.fadeOut()

$("#click1").click(function () {
    var target = $('#1');
    if (target.is(':visible')){
       target.fadeOut(500);
    } else {
       target.fadeIn(1250);
    }
});

代码演示（包括启动不可见）http://jsfiddle.net/Ps6Vj/

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

$("#click1").click(function () {
    $('#1').fadeToggle(500);
});

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") 
         });
  }

http://jsfiddle.net/3bJNq/

JSBin link here

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

.HTML：

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

.JS：

$("#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;
});
相关文章：