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动画功能不起作用

回答

相关问题