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

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

的标记

使用类选择器

.btn a {

此外，您需要淡化a元素，因为这是隐藏的元素。

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

如果您正在淡化div，请将display none设置为div本身。

<强> Check Fiddle

Answer 2

更改您的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 3

你忘了在你的css中添加类选择器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 4

为什么使用半解决方案？使用JQuery来创建两个状态

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

plunker

Answer 5

div需要从隐藏开始。要么做一个显示：无，要么在淡入淡出之前添加它

$（＆＃39;＃BTN＆＃39）隐藏（）;

JS FadeIn没有开发“a href”

5 个答案: