2011-09-11 13 views
-1

ここは私のhtmlドキュメントです。私はjQuery animate()を使って自分のヘッダーを別の位置に動かそうとしています。何らかの理由でそれを起動できません。 fadeOutfadeInが機能するので、私はJavaScriptのhrefが動作していることを知っています。また、ドキュメントタイプを宣言しないこととは関係ありません。jQueryで問題が発生しました。animate()

<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> 
+0

さらに、すべての主要なブラウザで利用可能なエラーコンソールを使用することを学ぶことでメリットが得られます。両方ともコードを処理するときにエラーを引き起こします。 ** Chromeの場合:** http://i.stack.imgur.com/tuSCr.png ** Firefoxの場合:** http://i.stack.imgur.com/IerKM.png *(埋め込みしないと申し訳ありませんStackOverflowは新しいユーザーがそうすることを妨げる)* –

答えて

1

ここで正しいアニメーション構文は間違っています。

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

よく私はクリックを使用したいと思う私のヘッダーを右にスライドさせたい。 – smiles

+0

私にそれの例を教えてもらえますか? – smiles

+0

上記の回答を参照してください、私のは正しい、彼はより良い説明します。 – alt

4

javascriptオブジェクトは、次のように定義されていません。

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

それは、このです:これはJavaScriptシンタックスではなく、CSSの構文でなければなりません

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

これは、javascriptのエラーコンソールとして使用するjsデバッガのコンソールウィンドウまたはコンソールウィンドウで説明されているはずです。

の両方を使用することも、そこに理由はない:それは、この内部で

$(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/

+0

私はあなたが言ったようにすべてを変更しましたが、まだ何もしていません。最初の機能を削除し、$(window).load(function(){ を残して、適切なjavascript構文に変更しました。それはそれで動作しませんか、私はどのように私のエラーを見つけるために行くのですか?むしろ初心者のタンクス – smiles

+0

ああ、実際に私はdidnt 2番目の部分を行う仕事をした感謝! – smiles

+0

私はあなたに何を言うか分からない。コードをjsFiddle(http://jsfiddle.net/jfriend00/V23rW/)という単純なjsFiddleに展開すると、IE9では正常に動作するので、私たちには表示されない部分に何か問題があります。 'position:absolute'としていますか?そうでない場合、上下にアニメーション化することはできません。 – jfriend00

関連する問題