1

我的动画有问题。

我的网页使用在链接上具有动画不透明度的按钮进行动画处理。但是当我的不透明度为 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可见

4

3 回答 3

1

您应该使用.fadeIn()and.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);
});
于 2013-11-01T00:07:59.023 回答
0

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/

于 2013-11-01T00:19:43.740 回答
0

JSBin 链接在这里

首先，不要以数字开头 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;
});
于 2013-11-01T00:53:31.497 回答