Why only works on JSfiddle? [duplicate]

This question already has an answer here:

Jquery script works in JSfiddle but not on html page 6 answers

Hello everyone im new on JSfiddle. And somone help me with a code in another post and give me that to me: http://jsfiddle.net/CN8z6/1/

I tried to make it work in my Chrome but i dosen't work when i press the button... Why?

My code:

<!DOCTYPE html>
<html>
    <head>

        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                text-align: center;
            }

            h1 {
                margin: 0;
                padding: 10px;
                font-family: Helvetica, Arial, sans-serif;
                font-size: 25px;
            }

            #menu {
                width: 100%;
                height: 20%;
            }

            #main-container {
                width: 100%;
                height: 80%;
                overflow: hidden;
            }

            #content-container {
                width: 300%;
                height: 100%;
                position: relative;
                top: 0;
                left: 0;
                font-size: 0px;
                transition: left 0.5s ease;
                -o-transition: left 0.5s ease;
                -ms-transition: left 0.5s ease;
                -moz-transition: left 0.5s ease;
                -webkit-transition: left 0.5s ease;
            }

            #content-container > div {
                width: 33.33%;
                height: 100%;
                display: inline-block;
                font-size: 15px;
            }

            #content1 {
                background: red;
            }

            #content2 {
                background: orange;
            }

            #content3 {
                background: green;
            }

        </style>

        <script type="text/javascript">

            $("#right1, #left3").on("click", function() {
                // This fires when 'right' is pressed on content 1,
                // or 'left' is pressed on content 3. In both cases
                // we want to move to show content 2.
                $("#content-container").css({left: "-100%"});
            });

            $("#left2").on("click", function() {
                // This fires when 'left' is pressed on content 2.
                // We want to move to show content 1.
                $("#content-container").css({left: "0%"});
            });

            $("#right2").on("click", function() {
                // This fires when 'right' is pressed on content 2.
                // We want to move to show content 3.
                $("#content-container").css({left: "-200%"});
            });

        </script>
    </head>
    <body>
        <div id="menu">
            <h1>This is the menu div</h1>
        </div>

        <div id="main-container">
            <div id="content-container">
                <div id="content1">
                    <h1>This is content 1</h1>
                    <a href="#" id="right1">Right</a>
                </div>
                <div id="content2">
                    <h1>This is content 2</h1>
                    <a href="#" id="left2">Left</a>
                    <a href="#" id="right2">Right</a>
                </div>
                <div id="content3">
                    <h1>This is content 3</h1>
                    <a href="#" id="left3">Left</a>
                </div>
            </div>
        </div>    
    </body>
</html>

Hope anyone can explain me why only works on JSfiddle, and what i need to do to run it myself.

You're running a script before the DOM is loaded. Either run the script after, or put it in $(document).ready().

<script type="text/javascript">
  $(document).ready(function() {
    $("#right1, #left3").on("click", function() {
        // This fires when 'right' is pressed on content 1,
        // or 'left' is pressed on content 3. In both cases
        // we want to move to show content 2.
        $("#content-container").css({left: "-100%"});
    });

    $("#left2").on("click", function() {
        // This fires when 'left' is pressed on content 2.
        // We want to move to show content 1.
        $("#content-container").css({left: "0%"});
    });

    $("#right2").on("click", function() {
        // This fires when 'right' is pressed on content 2.
        // We want to move to show content 3.
        $("#content-container").css({left: "-200%"});
    });
 });
</script>

来源：https://stackoverflow.com/questions/23734496/why-only-works-on-jsfiddle

标签

javascript

jquery

html

css

jsfiddle