Dynamic-CSS Example 2 - Delay Property

warning : this post is based on previous posts. be sure you read them.

Previous post we have made a simple query that can affect all elements inside a div tag. Now we

Previous Code:
-----------------------------------------------------------
        //example1
    $('#container').children().filter('div').dcss(
    {   
        transform : 'translate(0%,0%)  scale(.5,.5)',
        transition : 'all .5s <delay>s linear' 
    },
    {
        delay : .1
    });
-----------------------------------------------------------

 if we replaced the  ".1" value with a function that return the dynamic value, the code will be like :
-----------------------------------------------------------
$('#container').children().filter('div').dcss(
    {   
    transform : 'translate(0%,0%)  scale(.5,.5)',
    transition : 'all 1s <delay>s linear' 
    },
    {
        delay : function(i,el,c){ return i * .1;}
    });
}; 
-----------------------------------------------------------

Now for every object in the array the plugin will call "delay" function and put the value of it inside each <delay> found .


Params of called function (i ,el , c)

i  =  index of target element in the jquery array of elements.
el = element itself.
c = length of selected array.

these 3 arguments are provided to the function to do calculations and return a value specific to "el"  element.

in this example we return  ( i * .1)   

that means each element will delay ".1" seconds more than the previous element.