experiments/week3/Experiment4.html

﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({
                    left: '700px',
                    top: '100px'
                }, "slow");
                $("div").animate({
                    left: '500px',
                    top: '200px'
                }, "slow");
                $("div").animate({
                    left: '300px',
                    top: '100px'
                }, "slow");
                $("div").animate({
                    left: '500px',
                    top: '20px'
                }, "slow");
                
            });
        });
    </script>
</head>
<body>
    <fieldset style="height:300px">
        <button>Start Animation</button>
        <div style="background:#98bf21;height:100px;width:100px;position:absolute;top:20px;left:500px;">
    </fieldset>
    <br />
    <br />
    <fieldset>
        <h3>About the experiment</h3>
        <div>
            <span>
                The jQuery animate() method is used to create custom animations.
                This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.
            </span>
        </div>
    </fieldset>
    <br />
    <br />
    <fieldset>
        <h3>Code Snippets</h3>
        This code changes the position of the square but add jQuery animation to the change. There are 4 animations in sequence which change the position of the square each time after the previous animation is over. The transition will happen to the coordinates specified.
        <pre> 
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({
                    left: '700px',
                    top: '100px'
                }, "slow");
                $("div").animate({
                    left: '500px',
                    top: '200px'
                }, "slow");
                $("div").animate({
                    left: '300px',
                    top: '100px'
                }, "slow");
                $("div").animate({
                    left: '500px',
                    top: '20px'
                }, "slow");
                
            });
        });
        </pre>
    </fieldset>
    <br />
    <br />
    <fieldset>
        <h3>Source Code</h3>
        <a href="../../fileview/Default.aspx?~/experiments/week3/Experiment4.html" target="_blank">View Source</a>
    </fieldset>
    <br />
    <br />
    <fieldset>
        <h3>References</h3>
        <a href="http://www.w3schools.com/" target="_blank">W3 Schools</a>
    </fieldset>
</body>
</html>