Simple JQuery script animate not working

Question

So i created a simple html page :

index.html file:

<html>
<head>

</head>
<body>

    <div class="menu">      
        hello
    </div>  
     <div class="test">        
       Menu
     </div> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>

</body>
</html>

here is the app.js file:

var main = function() {
    $('.test').click(function(){
        $('body').animate({
            left: '500px'
            },200);
    })
}
$(document).ready(main)

I'm trying to understand what i did wrong , it seems like it should work..

was also tried to download jquery-2.1.1.min.js and to work with it , but still while clicking on the menu , the text is not moving ..

It is irrelevant to your problem, but it is good practice to keep `.js` files inside `` tag and not ``. — Bhushan Kawadkar, Oct 08 '14 at 05:50
With your code at the bottom, you don't need to use `.ready()` at all. Just invoke the `main` function or remove the code from it. — , Oct 08 '14 at 05:51
@BhushanKawadkar that's not true at all, theres nothing wrong with putting js files at the bottom, it just means you dont have to call `.ready` because those files don't load until after the HTML has — jmore009, Oct 08 '14 at 05:51
@USer22999299 are you trying to animate both lines of text to the right? — jmore009, Oct 08 '14 at 05:53
@jmore009, I did not say it is wrong, I said it is good practice :) — Bhushan Kawadkar, Oct 08 '14 at 05:54
@BhushanKawadkar: It's a good practice to have it at the bottom of the page. — , Oct 08 '14 at 05:55
@BhushanKawadkar I add them at the top but it's personal preference, not good practice. Scripts at the top could potentially block the rendering of the page — jmore009, Oct 08 '14 at 05:57

Pranav C Balan · Accepted Answer · 2014-10-08T06:08:48.097

2

You need to set position css property to body in order to work left.

body{
  position:relative;
}

REF : http://api.jquery.com/animate/

edited Oct 08 '14 at 06:08

answered Oct 08 '14 at 05:46

Pranav C Balan

106,305
21
136
157

hm... to be able to animate i must set a css for this specific part ? – USer22999299 Oct 08 '14 at 05:50
Works when I test it. – Oct 08 '14 at 05:53
could you explain why i should set the css to the body in order to animate it? and why to set position to relative? – USer22999299 Oct 08 '14 at 05:55
1

@USer22999299 Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default. (from : http://api.jquery.com/animate/) – Pranav C Balan Oct 08 '14 at 05:58
1

you have to set it to the body because thats what your code was targeting. And left, top, bottom and right properties do not apply to elements without absolute, relative, or fixed positioning – jmore009 Oct 08 '14 at 05:59
1

@USer22999299: [mdn CSS `left` property](https://developer.mozilla.org/en-US/docs/Web/CSS/left) – Oct 08 '14 at 06:00

Simple JQuery script animate not working

1 Answers1