What's a Jelo Shot? How do I use these tutorials?

Tutorial: Basics of Jelo Animation

Fading an element out

Jelo.Anim.ate({
    me       : $(".example"),
    css      : "opacity",
    from     : 1, // start value, or current value if omitted
    to       : 0, // end value, required
    duration : 1  // optional, defaults to 0.5 seconds
});
Run the Jelo Shot above to fade me out.
You can run it again, even when I'm invisible!

Fading an element out... then hiding it completely

Jelo.Anim.ate({
    me       : $(".example"),
    css      : "opacity",
    from     : 1,
    to       : 0,
    duration : 1,
    before   : function() {
        // this brings the div back (for demo purposes)
        Jelo.css(this.element, "display", "block");
        Jelo.css(this.element, "opacity", 1);
    },
    after    : function() {
        Jelo.css(this.element, "display", "none");
    }
});
Run the Jelo Shot above to fade me out.
When I'm gone, I'm gone for good!

Fading an element out... then fading it back in

Jelo.Anim.ate({
    me    : $(".example"),
    css   : "opacity",
    from  : 1,
    to    : 0,
    after : function() {
        Jelo.Anim.ate({
            me  : this.element,
            css : "opacity",
            to  : 1
        });
    }
});
Run the Jelo Shot above and I'll be right back.

Animating background and text color properties 

Jelo.Anim.ate({
    me       : $(".example"),
    css      : "background-color",
    from     : "#F6F6F6", // grey
    to       : "#0080FF", // blue
    duration : 2
});
Jelo.Anim.ate({
    me       : $(".example"),
    css      : "color",
    from     : "#000000", // black
    to       : "#FFFFFF", // white
    duration : 2
});
Run the Jelo Shot above to change my colors.

Highlighting text

Jelo.Anim.ate({
    me       : $("span.highlight"),
    css      : "background-color",
    from     : "#ffff66", // pale yellow
    to       : "#f6f6f6", // light grey
    duration : 1,
    easing   : "in" // starts slow, then speeds up
});
Run the Jelo Shot above to highlight some of this text. This is useful for drawing attention to something that has changed.

See the Jelo API for complete details.