JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>


    <div id="toolbar">
        <button id="jqAnimateBtn" disabled="disabled">jquery animate</button>
         <button id="dojoAnimateBtn" disabled="disabled">dojo animate</button>
    </div>
    <div id="stage">
        <div id="box"></div>
    </div>

CSS

body {
            background-color: #eee;
        }
        #stage {
            position: relative;
            background-color: #fff;
        }
        #box {
            position: absolute; 
            top: 10px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: #999;
            border-radius: 50px;
        }

JavaScript

var dir = -1;
        $(function(){
            $("#jqAnimateBtn")
                .attr("disabled",false)
                .click(function(){
                    dir *= -1;
                    $("#box").animate({
                        top: dir > 0 ? '+=200' : '-=200',
                        left: dir > 0 ? '+=200' : '-=200'
                    }, 1000, "swing", function(){
                        console.log("jQuery.animate: done", dir);
                    });
                });
        });
        dojo.require("dojo.fx");
        dojo.ready(function(){
            dojo.byId("dojoAnimateBtn").removeAttribute("disabled");
            dojo.connect( dojo.byId("dojoAnimateBtn"), "onclick", function(evt){
                dir *= -1;
                var props = dojo.position("box");
                dojo.animateProperty({
                    node: dojo.byId("box"),
                    duration: 1000,
                    properties: {
                        top: props.y + (200 * dir),
                        left: props.x + (200 * dir)
                    },
                    onEnd: function(){
                        console.log("dojo.animateProperty: done", dir);
                    }
                }).play();
            });
        });