Question

我的动画有问题。

我的网页上设有动画，其按钮在链接上具有动画不透明度。但是当我的不透明度为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：＃当你点击按钮使其显示为whatever.html

Answer 1

你应该使用.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);
});

Answer 2

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/

Answer 3

JSBin link here

首先，不要开始带有数字的ID（＃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;
});

更改链接HREF目的地

3 个答案: