Dynamic-CSS Example 6 - String Values

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

As all CSS values are written as strings,so we can play with functions returning a string to affect elements behavior.

Code-----------------------------------------------------------
$('#container').children().filter('div').dcss(
    {   
    height : '400px',
    transition : 'all 1s 0s ease<in><out>'
    },
    { 
        in : function(i,el,c){return (i % 2 == 0) ? '-in':''; },
        out : function(i,el,c){return (i % 2 == 1) ? '-out':''; }
    });
    

};
-----------------------------------------------------------
  Even indices will "-in" string while odd will return '-out'  string.

Result :

In this example you may notice that :

• you can return an empty string "" value null or undefined. 
• we can combine the in,out variables in one variable

Code-----------------------------------------------------------
$('#container').children().filter('div').dcss(
    {   
    height : '400px',
    transition : 'all 1s 0s ease<in_out>'
    },
    { 
        in_out: function(i,el,c){return (i % 2 == 0) ? '-in':'-out'; }
    });
    

};
-----------------------------------------------------------

the result will be the same as the above.