0

首先让我说我对 HTML、CSS 和 jQuery 完全陌生。我在大学里学习 HTML 和 CSS，我想自学 jQuery，这样我就可以领先于游戏。

我只是想为一些文本设置动画（向上移动文本并缩放字体大小），但是由于某种原因，我根本无法让文本设置动画。有什么我做错了吗？

另外，我四处搜索并尝试自己解决此问题，但是我似乎无法解决任何问题。这是我最后的手段。

HTML：

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script src="modernizr-2.js"></script>

    <script>$("#logo").animate({top:'0px',fontSize:'200%'}, 800);</script>

    <title>Home</title>

<link rel="stylesheet" type="text/css" href="index_layout.css" />

</head>

<body>
    <div id="logo" class="title">Test</div>
</body>

CSS：

.title {
    font-size: 450%;
    font-weight: bold;
    position: absolute;
    right: 35%;
    top: 25%;
}

这是一个 jsFiddle：http: //jsfiddle.net/MWKrM/1/

我在 Mac 上使用 Firefox。

4

3 回答 3

6

您的脚本在 logo 元素添加到 DOM 之前触发。您需要将 jquery 代码包装在 document.ready() 方法中：

$(document).ready(function(){
    $("#logo").animate({top:'0px',fontSize:'200%'}, 800);
});

这将延迟代码的执行，直到页面完全加载 DOM，此时您的动画应该正确执行。

于 2013-10-04T19:20:37.017 回答
2

JSFiddle

在$(document).ready(function(){..}

 $(document).ready(function(){
   $("#logo").animate({
      top:'0px',
      fontSize:'200%'
   }, 800);
 });
于 2013-10-04T19:20:29.570 回答
1

你需要告诉你的 HTML 你正在启动 jQuery，兄弟。

尝试这个：

<script>
$(document).ready(function(){
$("#logo").animate({top:'0px',fontSize:'200%'}, 800);
})
</script>
于 2013-10-04T19:22:25.733 回答