jQuery Animation ничего не делает

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/

Я использую Firefox на Mac.

  • 1
    У меня работает ... я на windows с хромом
  • 1
    В чем проблема? Анимация правильно работает на скрипке (и я использую Firefox также)
Показать ещё 6 комментариев
Теги:

3 ответа

6
Лучший ответ

Ваш скрипт запускается, прежде чем элемент логотипа будет добавлен в DOM. Вы захотите обернуть свой код jquery в методе document.ready():

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

Это задержит выполнение вашего кода до тех пор, пока страница полностью не загрузит DOM, после чего ваша анимация должна работать правильно.

Поделиться
  • 1
    Хороший улов. К сожалению, скрипка в вопросе не была хорошим представлением проблемы.
  • 0
    Спасибо. Это именно то, что было не так. Я должен подождать 6 минут, прежде чем я смогу принять ваш ответ
Показать ещё 2 комментария
2

JSFiddle

Сделайте свой скрипт в $(document).ready(function(){..}

 $(document).ready(function(){
   $("#logo").animate({
      top:'0px',
      fontSize:'200%'
   }, 800);
 });
Поделиться
  • 2
    За что ты проголосовал за ..? по моему мнению, ваш код легче читать, чем любой другой ответ. Может быть, я последний человек, который заботится о сохранении кода позже в пути. : p +1 для вас
1

Вам нужно сообщить вашему HTML, что вы запускаете jQuery, bro.

Попробуй это:

<script>
$(document).ready(function(){
$("#logo").animate({top:'0px',fontSize:'200%'}, 800);
})
</script>
Поделиться
  • 0
    Какой странный способ объяснить это. :-)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню