Short Overview

jCast stands for Javascript and Css Animation ScripT. It is a useful tool to create more dynamic programs for your javascript application. jCast is object oriented programming and programs are written on JSON type of object.

Syntaxes of jCast are easy to write, and more comprehensive and most of all, structure based. From defining element behaviors, attributes, style animation, jCast provides you ajax support to integrate the usefulness of your applications.

jCast Live Example

Please visit this site to view live example.

Code Explanation and Uses

Look at the example below.

<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script type="text/javascript">
//You can also use the shortcut _ () function 
jCast ({
 "#div_id": {
	childOf: "body",
	text: "HTML content",
	":click": {
		text: "Clicked",
		_background: "red"
On the above code you may notice that jCast uses JSON type object to run commands. We are passing an object to the jCast global function.

Each keys should be a selector, a quick HTML expression or a pointer to an object.

You may notice too that we define an event by the preceding : sign thus ":click". This is how we manipulate behavior of objects.

The attribute-like commands are pre-built in commands (or unique commands) that will triggered once called.

We can also define a SCENE that will execute on specific time or event.

jCast ({
  "@add.p": {
       "<p>Another paragraph</p>": {
            childOf: "#container", //this will append to #container
            ":click": "@add.p"
 "#container": "@add.p"
The scene here is named "@add.p" which in structure tells jCast to append a unique paragraph to an element with id #container, and bind an event to it that connects to the scene itself.

Note: A scene can become an inheritance according to the structure.
An inheritance is a set of attributes and commands that can be inherited by multiple elements.

jCast ({
     "": {_background: "blue", text: "You've clicked me"},
     "#some_id": {
             ":click": ""
     "p": {//all paragraph
             ":dblclick": ""
Note that a scene can be defined only with the jCast global function.

Using jQuery with jCast

jQuery is initially plugged in to work with jCast. When you link jCast extension to existing jQuery library (which is the initial set up) , jCast will create a jQuery function that will use jCast execution.

Use the .jCast () function or ._ () as short cut.


  $ ("#some_id"). jCast ({
         _background: "red",
         _dim: ["2cm", "4cm"]
However, using the jCast global function is more comprehensive.

jCast ({
   "#some_id": {
         _background: "red",
         _dim: ["2cm", "4cm"]
It is like defining style attributes in CSS.

Existing applications such as lightbox, dialogue (UI), and others can be included with jCast. To define custom attribute, just extend the jCast object like the example below:

jCast. extend ({
   "clean": function () {
         $ (this). html ("");
   "custom": function (text) {
        alert ("Custom attribute was called. "+ text);

jCast ({
        "#some_selector": {
               clean: 1, //clears the text
               custom: "Yeah!"
With these features, jCast have endless possibilities. However, there might be some bug to my code. Just contact me @

Pre-built in Attributes

text-replace text of elements
html-replace the html content of element
childOf-append to the specific element using selector
stop-stops all animation
css-manipulate css attributes
cssa- animate css attributes and styles
aClass-add a classname
rClass- remove a class name
script- execute a custom function
hidden- pass "yes" ti hide content and "no" to show content
delay-delay execution of script or jCast expression
dim- set dimension of element (s) [width, height]
_dim-animate dimension to specific values
coord-Set the coordinates of element (s) [x, y, z]
_coord-animate coordinates of element (s)
hover- built-in function to bind event or scene with mouseover and mouseout event.
get-ajax get. get the remote url's content. [url, data, function or jCast expression, type]
post-sends post request to ajax
load- loads url and append it to element (s)

CSS Attributes


CSSA Attributes (animation)


_stop- stops animation of colors.

[jQuery doesn't support color animations so we inserted the color animation plugin in jCast version. We are using _stop attribute to stop color animation like background, color (font), and border.]

More attributes will be added soon!

Thank you for your time!

We are pleased if you send us your comment and suggestions.