爲什麼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，身體」的工作，但我決定讓我的標題保持通用，並讓下面的內容動起來。

謝謝。

來源

2015-10-26 CalmlyCoding

請顯示您的頁面外觀的最小代碼示例。 –

這裏沒有足夠的信息來幫助你。 –

如果你想要一個真正的答案，我們需要真正的問題來看看這裏。所以如果你可以創建一個類似的** [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/

來源

2015-10-26 18:45:21 DoubleA

爲什麼div盒不能動畫？

回答

相關問題