JS FadeIn 无法在 "a href" 上工作

Question

在非常基础的文档中使用JS函数FadeIn，是行不通的。

HTML

<body>
    <div class="container">
        <h1 id="h1">Something</h1>
        <div class="btn" id="btn">  
            <a href="main.html">ENTER</a>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        var main = function() {
            //$('#h1').fadeIn(3200);
            $('#btn').fadeIn(1000);
        };

        $(document).ready(main);
    </script>
</body>

第一个 "h1" 元素正常工作，但是 "btn" 根本没有响应。可以在 CSS 吗？

CSS

btn a {
  display: none;
  background: #00cccc;
  position: absolute;
  top: 80%;
  left: 44%;
}

.btn a:hover { 
 background: #00a58f;
}

Answer 1

div 开始时需要隐藏。要么做一个 display:none 要么在你的 fade

之前添加这个

$('#btn').隐藏();

Answer 2

首先，您的 CSS 选择器正在寻找名为 btn

的标签

改用 class 选择器

.btn a {

此外，您还需要 fadeId a 元素，因为它是隐藏的元素。

$('#btn a').fadeIn(1000);

如果您要淡化 div，请将显示 none 设置为 div 本身。

Check Fiddle

Answer 3

更改您的 css 以定位正确的 #btn div

$(document).ready(function() {
    $('#btn').fadeIn(1000);
});

#btn {
  display: none;
  background: #00cccc;
  position: absolute;
  top: 80%;
  left: 44%;
}


.btn a:hover { 
 background: #00a58f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
    <h1 id="h1">Something</h1>
    <div class="btn" id="btn">
        <a href="main.html">ENTER</a>
    </div>
</div>

Answer 4

您忘记在 css 中添加 class 选择器 tp .btn a 并且您在 jquery 中使用了 id 而您应该在此处使用 class固定码：

.btn a {
  display: none;
  background: #00cccc;
  position: absolute;
  top: 80%;
  left: 44%;
}

.btn a:hover { 
 background: #00a58f;
}

    <body>
<div class = "container">
    <h1 id="h1">Something</h1>
    <div class="btn" id="btn">
        <a href="main.html">ENTER</a>
    </div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
var main = function() {
    //$('#h1').fadeIn(3200);
    $('.btn').fadeIn(1000);
};

$(document).ready(main);

</script>
</body>

Answer 5

为什么要用半解？使用JQuery使两个状态

$(document).ready(function(){
    $('#btn').fadeOut(0).fadeIn(1000);
});

plunker

JS FadeIn 无法在 "a href" 上工作

JS FadeIn not working on "a href"

javascript

jquery

fadein