[solved]Can't use what I've learned in the jQuery course about .animate() in the Interactive Website course


#1

In the Make an Interactive Website course, I'm currently at step Push Menu, at the following question:

Instructions
1 Add a function inside the .click() method.
2 Select the 'menu' class and animate it.
3 Right now, the menu is 285px past the left edge of the screen. That's why it is not visible! Inside the animate method:

a move it 0px to the left
b. make this happen over 200 milliseconds.

4 We now want to push the rest of the page to the left 285px. Use jQuery to select the body HTML element, animate it, and move it left 285px over 200 milliseconds.

What I did was the following:

var main = function(){
    $('.icon-menu').click(function(){
        $('.menu').animate({left:'+=0px'}, 200);
        
        $('body').animate({left:'+=285px'}, 200);
    });
};

$(document).ready(main);

I received the following error though:

Oops, try again. It looks like the '.menu' didn't animate into the screen. Check your $('.menu').animate() function.

When I clicked on the Hint after trying for a while, it turned out I had to change: left:'+=0px' to left:'0px' and left:'+=285px' to left:'285px'. I googled jQuery's animate function and see that both are correct (and in the jQuery course I did previously, I learned to use +=). It's not accepted as a proper answer though. In case of the +=0px I could understand this, since adding 0px is a bit strange if you can just put 0px, but with the 285px I think both answers should be correct: 285px and +=285px, especially since that is how it was explained in the jQuery course.

PS: It could be that I read past it, but I also can't remember that it was explained in the jQuery course that both are correct left:'50px' and left:'+=50px'. Perhaps also something to add somewhere in that course.

EDIT: Ok, I'm kinda stupid.. The question state setting it to 0px / 285px, not raising it by 0px/285px, so += isn't valid in this case. I realized this by the question after this one. The point about not having this mentioned (both set and increase/decrease, instead of just increase/decrease) in the jQuery course stands though..

Greetings,
Kevin C


#2

@kevin_cruijssen,

+++++ DOM representation of push menu

If your HTML-page is loaded into memory by the Browser
the memory-layout will be build
using the rules, as defined in the Document Object Model
in short the DOM

The DOM representation of the index.html file would look like:

               html
                |
         |------+---------|
         |                |
        head             body
         |                |
    |----+----|      |----+-----------|
    |    |    |      |                |
   link link link  10div(.menu)     27div(.jumbotron)
                    |                 |
     |--------------+----|          29div(.icon-menu)
     |                   |             |
   13div(.icon-close)  18ul          30i (.fa
     |                   |             |  and .fa-bars)
    img       |-----|----+|-----|    text  
              |     |     |     |    node
             19li  20li  21li  22li
              |     |     |     |
              a     a     a     a
              |     |     |     |
            text   text  text  text
            node   node  node  node

Now if you look at the DOM representation
the body-Tag is parent to
a 10div Element's Tree ( with class-attribute with class-name "menu" )
and
a 27div Element's Tree ( with class-attr. with class-name "jumbotron" set )

Now if you look in the style.css file,
with which you manage the Display of your Elements,
you will find that
the body object has the property left: 0; being set
( the body-Tree has a _start-Display at position left-0 )_

but
the .menu object has the property left: -285px; being set
and therefor the 10div-Tree is outside of Display.

In your 'app.js' file you are
CREATING a VARIABLE main
to which you assign a so-called anonymous Function
and in the FUNCTION-BODY of this anonymous Function
we are attaching our click Event-handlers
to the HTML-Elements which are
-1 carrying the "icon-menu" class-name as class-attribute
-2 carrying the "icon-close" class-name as class-attribute
( during the assignment the function is NOT executed )

You will have to add the code-line
$(document).ready( main );
which will result in the =main= Function to be executed
AFTER the Browser has set the ready Event-flag.

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/trysel.asp

what is CSS explained site:developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page

++++++++++ structure P u s h M e n u function
The structure of your =main= Function should look like....

  var main= function() {
     $('.icon-menu').click( function() {
           //Your animation
     });

     $('.icon-close').click( function() {
           //Your animation
      });
   };
 $(document).ready(main);

explanation of the push-menu setup
https://www.codecademy.com/forum_questions/55b3d3c1d3292f529b00005e