Question

我有一个方框，当有人点击Tell Me More时，信息框必须滑入，但我的jQuery没有做任何事情......

我的jQuery：

<script>
$( "#vertel-me-meer" ).click(function() {
  $( "#weten" ).fadeIn( 'slow', function() {
  });
});
</script>

我已经将jQuery包含在我的页面顶部，但我认为在这里输入代码并不是很有必要。这是我的CSS：

.meer {

font-size: 14px;
font-family: 'Ubuntu';
font-weight: bold;

color: #00748c;

}
#vertel-me-meer {
text-decoration: none;
position:absolute;
top:220px;
left:329px;
font-size:15px;
font-family: 'Ubuntu';
font-weight:bold;
font-style:italic;
color:#fff;
margin:40px 50px 0 0;
text-shadow:1px 1px 1px rgba(0,0,0,0.4);
}

#weten{
display: none;
 position: relative;
bottom: 125px;
top: 250px;
left: 50px;
width:395px;
height:115px;
background:#c7dbe3;
background:rgba(199,219,227,0.90);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #004f68;
box-shadow:3px 3px rgba(0,0,0,0.4);
overflow:hidden
}

Ofcoure，我的HTML：

<div id="vertel-me-meer"><p><a href="#" style="text-decoration: none;">Ik wil meer weten…</a></p></div>
<div id="weten" class="meer"><br>INFO</div>

有人能帮助我吗？感谢。

Answer 1

在DOM准备就绪时调用它。

确保HTML中包含元素#weten。

$(document).ready(function(){
    $( "#vertel-me-meer" ).click(function() {
        $( "#weten" ).fadeIn( 'slow', function() {
        });
    });
});

Answer 2

通过以下编写的代码更新您的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$( "#clickme" ).click(function() {
  $( "#weten" ).fadeIn( 'slow');
});
});
</script>
I've included the jQuery at the top of my page but I don't think it's neccesairy to put in in the code here. This is my CSS:
<style>
.meer {

font-size: 14px;
font-family: 'Ubuntu';
font-weight: bold;

color: #00748c;

}
#vertel-me-meer {
text-decoration: none;
position:absolute;
top:220px;
left:329px;
font-size:15px;
font-family: 'Ubuntu';
font-weight:bold;
font-style:italic;
color:#fff;
margin:40px 50px 0 0;
text-shadow:1px 1px 1px rgba(0,0,0,0.4);
}

#weten{
display: none;
 position: relative;
bottom: 125px;
top: 250px;
left: 50px;
width:395px;
height:115px;
background:#c7dbe3;
background:rgba(199,219,227,0.90);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #004f68;
box-shadow:3px 3px rgba(0,0,0,0.4);
overflow:hidden
}
</style>
Ofcoure, my HTML:

<div id="vertel-me-meer"><p><a href="#" id="clickme" style="text-decoration: none;">Ik wil meer weten…</a></p></div>
<div id="weten">This Id your Box</div>

jQuery fadeIn函数不起作用

2 个答案: