Возникли проблемы с jQuery animate () - PullRequest
0 голосов
/ 11 сентября 2011

Вот мой HTML документ.Я пытаюсь перевести один заголовок в другую позицию, используя jQuery animate(), и по какой-то причине не могу его запустить.fadeOut и fadeIn работают, так что я знаю, что мой JavaScript-href работает.Кроме того, это не связано с не объявлением типа документа.

 <html>
 <head>
 <title>We Hate Treyarch - Let your opinions mean something </title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(function(){
 $(window).load(function(){
 $("#underhead").animate
 ({top:600px;left:600px;},2000);
 $("#underhead").animate
 ({top:170px;left:165px;},5000);
 });
 });
 </script>
 </head>

<body>

<div id="tophead"></div>
<div id="sechead"> </div>

<div id="header">
 <h1 id="hye">We <span class="kame"><b>hate</b></span> treyarch</h1>
 </div>
 <div id="underhead">and so do you...</div>
 </body>
 </html>

Ответы [ 2 ]

4 голосов
/ 11 сентября 2011

Объект javascript не определен следующим образом:

{top:600px;left:600px;}

Это так:

{top:"600px", left:"600px"}

Это должен быть синтаксис JavaScript, а не синтаксис CSS.

Этодолжен был быть описан для вас в консоли ошибок javascript или в окне консоли в любом отладчике js, который вы используете, так как это синтаксическая ошибка javascript.

Кроме того, нет причин использовать оба:

$(function(){

с этим внутри:

$(window).load(function(){

Используйте один или другой.Я бы предложил только версию jQuery, если вам не нужно ждать окончания загрузки изображений, в этом случае используйте только версию window.load.

Этот код работает:

 $(function(){
     $("#underhead").animate({top: "600px", left: "600px"}, 2000);
     $("#underhead").animate({top: "170px", left: "165px"}, 5000);
 });

и выможно увидеть это в действии здесь: http://jsfiddle.net/jfriend00/V23rW/.

1 голос
/ 11 сентября 2011

Вот правильный анимационный синтаксис, ваш неверный.

$('#id').click(function() {
  $('.class').animate({
    opacity: 0.25,
  }, 5000, function() {
  });
});
...