jquery構文でエラーが見つかりませんか？

Question

[これはeirenilog.tumblr.comでプレビューすることができます]

何かの理由で私のjqueryは少しでも機能しません。私はこれらのdivのCSSを移動しようとするために上部のいくつかのボタンをクリックすると変更されようとしていますが、何も動きません。私はcssの中で手動で値を変更すると、それは適切に位置に入るので、私はそれがCSSのエラーではないことを知っている。私はそれを以前の作品からほぼ正確にコピーしましたが、何かが私を逃していますか？

誰かがアニメーションを妨害している可能性のあるものを見てください。 （あなたは私が（両方の.cssをしようとしてきたことがわかります）と.animate（））

CSSは次のようになります。

#game{ 
    position:absolute; 
    left:0%; 
    width:100%; 
} 
#about{ 
    position:absolute; 
    left:100%; 
    width:100%; 
} 
#team{ 
    width:100% 
    left:200%; 
    position:absolute; 
} 
#gallery{ 
    width:100% 
    position:absolute; 
    left:300%; 
} 
#shop{ 
    width:100% 
    left:400%; 
    position:absolute; 
} 

とjQueryのようなある：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 


$(document).ready(function(){ 
$(".game").click(function(){ 

    $("#game").css("left","0%"); 
    $("#about").css("left","100%"); 
    $("#team").css("left","200%"); 
    $("#gallery").css("left","300%"); 
    $("#shop").css("left","400%"); 
});  
$(".about").click(function(){ 
    $("#game").animate({left:'-100%'}); 
    $("#about").animate({left:'0%'}); 
    $("#team").animate({left:'100%'}); 
    $("#gallery").animate({left:'200%'}); 
    $("#shop").animate({left:'300%'}); 
}); 
$(".team").click(function(){ 
    $("#game").css({"left","-200%"); 
    $("#about").css("left","-100%"); 
    $("#team").css("left","0%"); 
    $("#gallery").css("left","100%"); 
    $("#shop").css("left","200%"); 
}); 
$(".gallery").click(function(){ 

    $("#game").css("left","-300%"); 
    $("#about").css("left","200%"); 
    $("#team").css("left","-100%"); 
    $("#gallery").css("left","0%"); 
    $("#shop").css("left","100%"); 
}); 
$(".shop").click(function(){ 
    $("#game").animate({left:'-400%'}); 
    $("#about").animate({left:'-300%'}); 
    $("#team").animate({left:'-200%'}); 
    $("#gallery").animate({left:'-100%'}); 
    $("#shop").animate({left:'0%'}); 
}); 
});  
</script> 

Answer 1

チェックあなたの構文

あなたのanimate()呼び出しの間でコピー＆ペーストの結果のように見える開口部{を持っていますそれらを使用していて、css()はそうではありません。

あなた$('.team').click()関数の最初の行を参照してください。

// Line 118 
$("#game").css({"left","-200%"); 

は次のようになります。

$("#game").css("left","-200%"); 

この変更を行った後、あなたのコードは、少なくとも私はあなたが行っている想像ものと同様に動作するように見えますas seen in this exampleの後に：

Answer 2

あなたはあなたのCSSに位置を追加する必要があり、あなたのスクリプトは次のようにする必要があります：

$(".game").click(function(){ 
    $("#game").css({"left":"0%","position":"absolute"}); 
    $("#about").css({"left":"100%","position":"absolute"}); 
    $("#team").css({"left":"200%","position":"absolute"}); 
    $("#gallery").css({"left":"300%","position":"absolute"}); 
    $("#shop").css({"left":"400%","position":"absolute"}); 
});  
$(".about").click(function(){ 
    $("#game").animate({"left":"-100%","position":"absolute"}); 
    $("#about").animate({"left":"0%","position":"absolute"}); 
    $("#team").animate({"left":"100%","position":"absolute"}); 
    $("#gallery").animate({"left":"200%","position":"absolute"}); 
    $("#shop").animate({"left":"300%","position":"absolute"}); 
}); 
$(".team").click(function(){ 
    $("#game").css({"left":"-200%","position":"absolute"}); 
    $("#about").css({"left":"-100%","position":"absolute"}); 
    $("#team").css({"left":"0%","position":"absolute"}); 
    $("#gallery").css({"left":"100%","position":"absolute"}); 
    $("#shop").css({"left":"200%","position":"absolute"}); 
}); 
$(".gallery").click(function(){ 

    $("#game").css({"left":"-300%","position":"absolute"}); 
    $("#about").css({"left":"200%","position":"absolute"}); 
    $("#team").css({"left":"-100%","position":"absolute"}); 
    $("#gallery").css({"left":"0%","position":"absolute"}); 
    $("#shop").css({"left":"100%","position":"absolute"}); 
}); 
$(".shop").click(function(){ 
    $("#game").animate({"left":"-400%","position":"absolute"}); 
    $("#about").animate({"left":"-300%","position":"absolute"}); 
    $("#team").animate({"left":"-200%","position":"absolute"}); 
    $("#gallery").animate({"left":"-100%","position":"absolute"}); 
    $("#shop").animate({"left":"0%","position":"absolute"}); 
});