I'm learning Javascript and JQuery, and just finished a chapter on JQuery animations.So i decided to give it a try and implement a simple animation on Html document i had.
Here is the code:
jQuery(document).ready(function($) {
var animInfo = {
iter : 1, // Iterator
elementCount : 4, // Number of ( <div class="soc(?)"></div><p></p> ) structures to animate
socAnimSpeed : 500, // soc - Section One Content Animation Speed
socpAnimSpeed: 1000 // scop - Section One Content <p> Animation Speed
};
animSoc( animInfo ); // Start the Animations
});
/* Logic Behind the Functions
function
animSoc(obj) ---- If Iterator is <= to Number of Elements,<<<<<<
| v ^
| v ^
---- Animate Section One Content( Iter value ) ^
( Width ) ^
v ^
function v ^
animSocp(obj) --- Animate Section One Content( Iter value ) <p> ^
| ( FadeIn ) ^
| v ^
| v ^
---- Increase the Iterator by One >>>>>>>>>>>>>>>
*/
function animSoc( obj ){
if ( obj.iter <= obj.elementCount ){
$( ".soc" + obj.iter ).animate( { width: "60%" }, obj.socAnimSpeed,
function(){
animSocp( obj );
});
}
return;
}
function animSocp( obj ){
$( ".soc" + obj.iter + " + p" ).fadeIn( obj.socpAnimSpeed,
function() {
obj.iter++;
animSoc( obj );
});
}
The things I am most concerned about :
- Is this considered bad practice ? If yes why ?
- Commenting of the Code Sample. Is it good or bad ?
- Errors.
- Your professional opinion.