更改鏈接HREF目標

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：＃和當您單擊按鈕以使其對what.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鏈接在這里

首先，不要以數字開頭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;
});