Question

＆＃13;

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

＆＃13;

<body>  
<div id=headerBoxAfter style="border-style:solid;margin-top:-20px;height:80px;width:100%;margin-left:-3px;background-color:black;text-align:left;">
			<!-- <img id=gameScrollButton src=down56.png alt=downButton style=float:left;margin-left:12px;margin-top:3px  -->
			<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>
			
		</div>
		
		<div id=homePage style=boder-style:solid;height:100%;padding-bottom:20px;> <!-- homePage begins -->
		
		<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>
	<script type="text/javascript" src="RyanTTSchultz.js"></script>
         </body>

＆＃13;

当用户点击导航按钮时，我希望我的整个主页向左移动。

我给了我的div框一个id =＆＃34; homePage＆＃34; 我已经在我的js中引用了它：

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

以上一行与＆＃34; html，body＆＃34;一起工作，但我决定让我的标题保持通用，只是为下面的内容制作动画。

谢谢。

Answer 1

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

这个标记虽然很残酷 - 你的HTML代码中不应该有内联CSS，你应该将HTML属性包装在引号中。你有未公开的<div>标签，似乎是在任何悬停的项目中添加一个指针类 - 你不需要为此添加一个类，你只需使用：#myId:hover { /*Add styles*/}在CSS中定位它们。

在你的JS无效之上，因为你在$（'html，'）之后有一个逗号。我把它放在你的小提琴里，然后把它清理一下，但我会劝你看看HTML和CSS的最佳实践。

http://jsfiddle.net/t4bp4qqm/

为什么div框没有动画效果？

1 个答案: