JavaScript動畫功能不起作用

這是代碼的樣子。JavaScript動畫功能不起作用

<head> 
    <link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" /> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="C:\Users\User\Desktop\js.js"></script> 

</head> 

<body> 
<div id="header_wrap"> 
    <div id="header"> 
     <div id="logo"> 
     LOGO 
     </div> 
     <div class="nav"> 
     <a href="http://www.google.se"> 
      Stuff 
     </a> 
     <a href="javascript:void(0)"> 
      Other stuff 
     </a> 
     <a href="javascript:void(0)"> 
      More stuff 
     </a> 
     </div> 
     <div class="mobile_nav"></div> 
     <div class="mobile_nav_menu"> 
     <div class="mobile_menu"> 
      <span>Stuff</span> 
      <span>Other stuff</span> 
      <span>More stuff</span> 
     </div> 
     <div class="mobile_close"> 

     </div> 
     </div> 
    </div> 
    </div> 
<div class="image_container"> 
    <div class="inner_content" id="slide1"> 
    <h2> 
     CONTENTS 
    </h2> 
    </div> 
    <a class="button" href="javascript:void(0)"></a> 
</div> 
</body>

的.js文件中包含此代碼

setTimeout(function(){ 
    $("#slide1").css('opacity', '1'); 
},800); 

setInterval(function(){ 
    $(".button").toggleClass("opacity"); 
},1000); 
//Navigation 
$(".mobile_nav").click(function() { 
    $(".mobile_nav_menu").animate({right: 0}); 
}) 
$(".mobile_close").click(function() { 
    $(".mobile_nav_menu").animate({right: -270}); 
})

誰能幫助我什麼，我做錯了，如何能夠解決嗎？

謝謝！/AJ

更新：.js加載（嘗試警告函數），但不填寫它應該的功能。原始筆可以在http://codepen.io/yuriylianguzov/pen/qjwEe

來源

2014-06-17 Anna Josefin

您是否看到任何控制檯錯誤？ – smerny

您正在切換一個名爲「不透明」的類。你有不透明的課程嗎？ – rybo111

嗨，安娜，我想你需要在嘗試運行更復雜的東西之前獲得JavaScript的基礎知識。您的JavaScript嘗試附加到HTML中不存在的某些元素 - 例如＃slide1或.button – Kinnectus

其中一個問題是，您嘗試從物理文件路徑中引用JavaScript文件，而不是URL（或相對路徑）。您不能在html文件中使用您的硬盤路徑來包含javascript。

<script src="C:\Users\User\Desktop\js.js"></script>

如果你的JavaScript是在同一文件夾作爲你的HTML，嘗試這樣的事情：

<script src="js.js"></script>

我不完全知道什麼對JavaScript的預期的行爲是，因爲它似乎正在做它打算做的事情。如果您查看codepen鏈接中的DOM，您提供的id爲'slide1'的元素將其不透明樣式設置爲1（參見下文），而具有「按鈕」類的定位標籤獲取類「不透明度」每秒切換和關閉（下面沒有描述，但你可以看到它發生在螢火蟲中）。

<div class="image_container"> 
    <div id="slide1" class="inner_content" style="opacity: 1;"> 
    <h2> 
     We are who we choose to be. 
    </h2> 
    </div> 
    <a href="javascript:void(0)" class="button"></a> 
</div>

另外兩個點擊處理程序的瞄準空元素（帶班「mobile_nav」的元素，並與階級「mobile_close」的元素），所以他們不會做任何事情。

$(".mobile_nav").click(function() { 
    $(".mobile_nav_menu").animate({right: 0}); 
}) 
$(".mobile_close").click(function() { 
    $(".mobile_nav_menu").animate({right: -270}); 
}) 

<div class="mobile_nav"></div> 

<div class="mobile_nav_menu"> 
    <div class="mobile_menu"> 
    <span>Projects</span> 
    <span>Profile</span> 
    <span>Contact</span> 
    </div> 
    <div class="mobile_close"></div>       
</div>

我希望這有助於！

來源

2014-06-17 20:14:13 MDiesel

實際上是從本地文件加載的JavaScript（我已經打包過來用alert函數來試試它）。問題是它不執行它應該執行的任務。檢查我的更新在第一篇文章:) –

1）一些JavaScript是作用於沒有任何內容

2）更改線路$(".mobile_nav_menu").animate({right: 0});的元素：$(".mobile_nav_menu").animate({"right": "0"});，做同樣的與其他一個，雖然它不會有任何功能，真的。

3）你的班級mobile_nav_menu需要有css，說position:relative的屬性「權利」工作。

4）我建議你移動你的mobile_close DIV的mobile_nav_menu DIV之外，所以當你點擊它

如果有人有東西加不動，請這樣做。

來源

2014-06-17 20:25:41 Shmoopy

如果你看看codepen（http://codepen.io/yuriylianguzov/pen/qjwEe），並使窗口較小，並點擊菜單標誌，你會看到什麼功能我試圖申請是。不幸的是，它根本不起作用，儘管它在codepen上工作。 –

JavaScript動畫功能不起作用

回答

相關問題