JavaScript animate function doesn't work

Question

This is what the code looks like.

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

the .js file contains this code

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});
})

Can anyone help me out with what I'm doing wrong and how it can be fixed?

Thank you! /AJ

UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe

You are toggling a class called 'opacity'. Do you have a class called opacity? — rybo111
– rybo111, Commented Jun 17, 2014 at 20:09
Are you sure that it's not loading? Try adding alert(); in your first function and see if something pops up on your screen. — Chase Sandmann
– Chase Sandmann, Commented Jun 17, 2014 at 20:15
@Chasesandmann Thank you! It loads but it just doesn't work then, which is strange since the js-code is straight off codepen. — Anna Josefin
– Anna Josefin, Commented Jun 17, 2014 at 20:19

MDiesel · Accepted Answer · 2014-06-18 12:43:29Z

4

One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.

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

If your javascript is in the same folder as your html, try something like this:

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

I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).

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

The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.

$(".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>

I hope this helps!

edited Jun 18, 2014 at 12:43

answered Jun 17, 2014 at 20:14

MDiesel

2,65713 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anna Josefin Over a year ago

Actually the javascript loads from the local file (I got tipped to try it with the alert function). The problem is that it does not perform the task it is supposed to perform. Check my update on the first post :)

Shmoopy · Accepted Answer · 2014-06-17 20:25:41Z

0

1) Some of the elements your javascript is acting on don't have any content

2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.

3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.

4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it

If anyone has stuff to add, please do so.

answered Jun 17, 2014 at 20:25

Shmoopy

6695 silver badges17 bronze badges

1 Comment

Anna Josefin Over a year ago

If you look at the codepen (codepen.io/yuriylianguzov/pen/qjwEe) and make the window less wide, and click the menu logo you will see what the function i'm trying to apply is. Unfortunately it does not work at all, even though it works on the codepen..

Collectives™ on Stack Overflow

JavaScript animate function doesn't work

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related