Question

这就是代码的样子。

<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

上找到

Answer 1

其中一个问题是您尝试从物理文件路径引用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（见下文），而带有'button'类的锚标记正在获得类'opacity'每秒打开和关闭（下面没有描述，但你可以看到它发生在萤火虫中）。

<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>

我希望这有帮助！

Answer 2

1）您的javascript正在执行的某些元素没有任何内容

2）将行$(".mobile_nav_menu").animate({right: 0});更改为：$(".mobile_nav_menu").animate({"right": "0"});并对另一行执行相同操作，但实际上它没有任何功能。

3）您的班级mobile_nav_menu需要有position:relative的css才能使“权利”属性生效。

4）我建议你将mobile_close div移到mobile_nav_menu div之外，这样点击它就不会移动

如果有人要添加内容，请执行此操作。

JavaScript动画功能不起作用

2 个答案: