Animation (Basic)top #

    function change() {
        Jelo.Anim.ate({
            me: $('#_loop'),
            css: 'background-color: ' + Jelo.CSS.randomColor(),
            duration: 1.5,    // duration is in seconds
            easing: 'linear', // see Jelo.Anim.Easing for other options
            after: change     // any function reference or closure works here
        });
    }
    change(); // change will call itself after each animation

Animate on Button Click

    <style type="text/css">
        #target {
            background-color: #000000;
            color: #ffffff;
        }
    </style>
    
    <div id="target">change my colors!</div>
    <button type="button" id="go">Go!</button>
    <button type="button" id="reset">Reset</button>
    
    <script type="text/javascript">
        Jelo.load('all', function() {
            
            // this animation fires when the Go button is clicked
            Jelo.on($('#go'), 'click', function() {
                Jelo.Anim.ate({
                    me: $('#target'),
                    css: 'background-color: #99ccff; color: #000;'
                });
            });
            
            // use any valid CSS, including shorthand properties or colors
            Jelo.on($('#reset'), 'click', function() {
                Jelo.Anim.ate({
                    me: $('#target'),
                    css: 'background: #000; color: #fff;'
                });
            });
            
        });
    </script>