JS FadeIn无法使用“ a href”
[英]JS FadeIn not working on “a href”
问题描述
Using JS function FadeIn in very basic document, it is not working. 
在非常基本的文档中使用JS函数FadeIn，它不起作用。
HTML 的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>
The first "h1" element works as it should, however the "btn" doesn´t respond at all. 第一个“ h1”元素可以正常工作，但是“ btn”根本不响应。 Can it be maybe in CSS? 可以在CSS中使用吗？
CSS 的CSS
btn a {
display: none;
background: #00cccc;
position: absolute;
top: 80%;
left: 44%;
}
.btn a:hover {
background: #00a58f;
}
5 个解决方案
解决方案1
1 已采纳 2015-07-24 19:51:23
First your CSS selector is looking for a tag called btn 首先，您的CSS选择器正在寻找一个名为btn的标签
Use a class selector instead 改用类选择器
.btn a {
Also you would need to fadeId the a element instead as that is the one that is hidden. 另外，您将需要衰落a元素，因为那是隐藏a元素。
$('#btn a').fadeIn(1000);
If you are instead fading the div, set display none to the div itself. 如果您要使div褪色，则将display none设置为div本身。
解决方案2
0 2015-07-24 19:52:34
change your css to target the correct #btn div 更改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>
解决方案3
0 2015-07-24 19:55:16
you forgot adding the class selector tp .btn a in your css plus you used id in your jquery while you should use class here is fixed code: 您忘记在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>
解决方案4
0 2015-07-24 22:08:42
解决方案5
-1 2015-07-24 19:48:51
The div needs to start out as hidden. div需要以隐藏状态开始。 either do a display:none or add this before your fade 不显示：无显示或在淡入淡出之前添加此显示
$('#btn').hide(); $（'＃btn'）。hide（）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.