Question

所以刚开始学习jQuery。我似乎无法使其发挥作用。所以我已经使用脚本标记将我的jQuery链接到我的html文档：

<script type="text/javascript" src="script.js"></script>

我有h1标题ONE TWO THREE。使用<span>标记对每个单词的归属方式不同。我想尝试的是对ONE这个词进行了简单的讨论。那我在这里错过了什么或者在这里做错了什么？我的h1是position:fixed是否必须对此做些什么呢？

HTML：

<html>
<head>
    <title></title>
    <link rel='stylesheet'rel="stylesheet" href='style.css'/>
    <script type="text/javascript" src="script.js"></script>    
</head>

<body>
    <h1><span id="ONE">ONE</span><br><span id="TWO">TWO</span><br><span id="THREE">         THREE</span><br></h1>
</body>
</html>

css for h1：

h1 {position:fixed;
left:14px;
bottom:36px;
margin-bottom:15px;
line-height:40px;
}

ONE的css代码：

#ONE {
  font-family:broadway;
  font-size:80px;
  color:#880303;
}

ONE的jQuery函数：

$(document).ready(function() {
  $('#ONE').slideDown('slow');    
});

Answer 1

您已将物品定位，因此无法滑动。
并且您没有隐藏您正在滑落的物品，因此无法显示。（另见jQuery slideDown() animation not working）
我认为跨度不能开始滑动，我已将其更改为div。

HTML：

<body>
    <div id="ONEdiv"><h1><span id="ONEspan">ONE</span></h1></div>
    <div id="TWOdiv"><h1>TWO</h1></div>
    <div id="THREEdiv"><h1>THREE</h1></div>
</body>

JS：

$(document).ready(function() {
    $('#ONEdiv').slideDown('slow');
});

CSS：

h1 {
line-height:40px;
}

#ONEdiv {
    display:none;
}

#ONEspan {
  font-family:broadway;
  font-size:80px;
  color:#880303;
}

http://jsfiddle.net/2uJJ6/3/

jQuery slidedown在H1标签中不起作用

1 个答案: