为什么div盒不能动画？

问题描述：

$(document).ready(function() { 
 
    $("#myPortfolioPage").hide(); 
 
    $("#contactMeBox").hide(); 
 
    $("#gameBox").hide(); 
 

 
    $("#gameScrollButton").hover(function() { 
 
    $("#gameScrollButton").addClass("pointer"); 
 
    }); 
 

 
    $("#gameScrollButton").click(function() { 
 
    if (!($("#gameBox").hasClass("open"))) { 
 
     $("#gameBox").fadeIn(1000); 
 
     $("#gameBox").addClass("open"); 
 
    } else { 
 
     $("#gameBox").fadeOut(1000); 
 
     $("gameBox").removeClass("open"); 
 
    } 
 

 
    }); 
 

 

 

 

 
    $(".contact").click(function() { 
 

 

 
    if (!($("#contactMeBox").hasClass("open"))) { 
 
     $("#contactMeBox").fadeIn(300); 
 
     $("#contactMeBox").addClass("open"); 
 
     $('html, body').animate({ 
 
     scrollTop: 0 
 
     }, 0); 
 

 

 
    } else { 
 
     $("#contactMeBox").fadeOut(300); 
 
     $("#contactMeBox").removeClass("open"); 
 

 
    } 
 

 

 
    }); 
 

 
    $(".contact").hover(function() { 
 

 
    $(".contact").addClass("pointer"); 
 

 

 
    }); 
 

 

 
    //My portfolio 
 
    $("#myPort").hover(function() { 
 

 
    $("#myPort").addClass("pointer"); 
 

 

 
    }); 
 

 
    $("#myPort").click(function() { 
 

 

 

 

 

 
    /*$("#contactMeBox").fadeOut(100); 
 
\t \t $("#contactMeBox").removeClass("open"); */ 
 
    $("#myPortfolioPage").fadeIn(750); 
 
    $('html, body').animate({ 
 
     scrollTop: 0 
 
    }, 0); 
 
    /* Will edit out this error $("html,").animate({ 
 
     "left": "-1375px" 
 
    }, "slow"); */ 
 

 
    $("#homePage").animate({"left":"-1375px"},"slow"); 
 
//Code above in question ^^^^^^^ Thanks 
 

 

 

 
    }); 
 

 
    //BackHome 
 
    $(".goHome").hover(function() { 
 

 
    $(".goHome").addClass("pointer"); 
 

 

 
    }); 
 

 
    $(".goHome").click(function() { 
 

 
    $("body").animate({ 
 
     "left": "0px" 
 
    }, 1000); 
 
    $("#myPortfolioPage").fadeOut(500); 
 

 

 
    }); 
 

 

 
});

<body> 
 
<div id=headerBoxAfter style="border-style:solid;margin-top:-20px;height:80px;width:100%;margin-left:-3px;background-color:black;text-align:left;"> 
 
\t \t \t <!-- <img id=gameScrollButton src=down56.png alt=downButton style=float:left;margin-left:12px;margin-top:3px --> 
 
\t \t \t <h1 id=myName style=font-family:st;font-size:40px;margin-top:30px;margin-left:20px;> <span style=background-color:white;border-style:solid;padding:10px;>My</span> <span style=background-color:red;border-style:solid;padding:10px;margin-left:-35px;>Name</span> <span id=myPort style=color:white;> My Portfolio </span> </h1> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id=homePage style=boder-style:solid;height:100%;padding-bottom:20px;> <!-- homePage begins --> 
 
\t \t 
 
\t \t <div id=bodyBox style=height:100%;width:100%;border-style:solid;margin-left:0px; 
 
</div> 
 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
 
\t <script type="text/javascript" src="RyanTTSchultz.js"></script> 
 
     </body>

我想我的整个网页，当用户点击一个导航按钮向左移动。

我已经给定格框一个id =“主页” 我在我的js引用它像这样：

$("#homePage").animate({"left":"-1375px"},"slow");

以上符合“HTML，身体”的工作，但我决定让我的标题保持通用，并让下面的内容动起来。

谢谢。

请显示您的页面外观的最小代码示例。 –

这里没有足够的信息来帮助你。 –

如果你想要一个真正的答案，我们需要真正的问题来看看这里。所以如果你可以创建一个类似的** [demo]（http://www.jsfiddle.net）**或者提供足够的代码来帮助你更好。 – divy3993

答

我认为你需要在你的CSS中添加position:relative;到#homePage。

尽管这种标记很残酷 - 您的HTML代码中不应该包含内联CSS，并且您应该将HTML属性用引号括起来。您已经打开了<div>标签，并且似乎正在为任何悬停的项目添加一个指针类别 - 您不需要为此添加类，只需使用以下代码将它们定位到CSS中：#myId:hover { /*Add styles*/}。

最重要的是你的JS无效，因为你在$（'html'）之后有一个逗号。我把它放在了一个小提琴中，并且稍微清理了一下，但是我会敦促你环顾一下HTML和CSS的最佳实践。

http://jsfiddle.net/t4bp4qqm/

为什么div盒不能动画？

相关推荐