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"});
});

我无法在一段jquery语法中找到错误？

2 个答案: