Hi all, I have taken a script about sliding text from net. It has usage method. but inside it there is function that has four parameters and one of them was used. I dont understand it. Can you help me to understand it? below is script.
in this script i dont understand this line
return this.replace(new RegExp(separator + '([^'+separator+'])','g'),function(u,d,t,q){ return d.toUpperCase(); });
function(u,d,t,q) i see all these parameters (u,d,t,q) ara not used except d and what is d i dont understand. i will wait your responses. thanks in advance.
/*
* Usage:
* (new Animate(document.getElementById('item')))
.numeric(2, { 'margin-left', -100, ease: Ease.easeInQuad } )
.onComplete(function(el){
alert('Element has moved ' + el.style.marginLeft + ' to the left in 2 seconds' );
});
*/
var Animate = function(element) {
var self = this,time, timer, animationType, msDuration, parameters,
onCompleteHandler = function(){}, onUpdateHandler = function(){},freq=1;
/**
* Set the timer
* @function
*/
function startTimer() { time = (new Date()).getTime(); timer = setInterval(loop,freq); };
/**
* Stop the timer
* @function
*/
function stopTimer(){ clearInterval(timer); };
/**
* Time in miliseconds passed since the startTimer was called
* @function
* @return {Number} miliseconds
*/
function getCurrentTime() { return (new Date()).getTime() - time; };
/**
* @param {String} type - the type of the animation
* @param {Number} duration - time in seconds
* @param {Object} params - parameters
* e.g. { 'margin-left' : 100, opacity : 0, ease : Ease.easeInOutQuad, onComplete : function(){ alert('Animation finished'); } }
*/
function animate(type, duration, params) {
msDuration = duration * 1000;
parameters = params;
animationType = new type(element, params.ease || Ease.linear, msDuration);
delete params.ease;
startTimer();
};
/**
* Transforms the String into camel case
* e.g.
* 'margin-left'.toCamelCase() => 'marginLeft'
* 'test camel'.toCamelCase(' ') => 'testCamel'
*/
String.prototype.toCamelCase = function(separator) {
separator = separator || "-";
return this.replace(new RegExp(separator + '([^'+separator+'])','g'),function(u,d,t,q){ return d.toUpperCase(); });
};
/**
* Function to make the effect visible
* will start being called as soon as the startTimer function is called
* will stop when the duration time is expired or the stopTimer function is called
*/
function loop() {
if (getCurrentTime() <= msDuration) {
for(var rule in parameters) {
animationType.setValue(rule, parameters[rule], getCurrentTime());
}
onUpdateHandler(element);
} else {
stopTimer();
onCompleteHandler(element);
}
};
/**
* @param {HTMLElement} object - to be affected
* @param {Number} duration - time in seconds
* @param {Object} params - parameters
*/
self.numeric = function(duration, params) {
animate(NumericAnimationType, duration, params);
return self;
};
self.onComplete = function(handler) { onCompleteHandler = handler; return self; }
self.onUpdate = function(handler) { onUpdateHandler = handler; return self; }
return self;
};
/**
* NumericAnimationType - animate objects using numeric values
* e.g. margin-left, width, height, x, y, etc...
*/
var NumericAnimationType = function(el, ease, duration){
var self = this, el, ease, startValues = {};
self.setValue = function(attribute, endValue, currentTime) {
if (!startValues[attribute]) {
startValues[attribute] = parseFloat(getComputedStyle(el).getPropertyValue(attribute));
}
el.style[attribute.toCamelCase()] = ease(currentTime, startValues[attribute], endValue, duration) + 'px';
};
return self;
};
/**
* Class to generate the smoothing effect
*/
var Ease = (function(){
/**
* t = current time
* b = start value
* c = end value
* d = duration
*/
return {
linear : function(t, b, c, d) {
return c*t/d + b;
},
easeInQuad : function(t, b, c, d) {
t /= d;
return c*t*t + b;
},
easeOutQuad : function(t, b, c, d) {
t /= d;
return -c * t*(t-2) + b;
},
easeInOutQuad : function(t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
}
}
}());
