0

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;
        }
    }
}());
3
Contributors
4
Replies
21
Views
4 Years
Discussion Span
Last Post by azegurb
0

If you'd read the comments, it tells you what it does:

/**
    * Transforms the String into camel case 
    * e.g. 
    * 'margin-left'.toCamelCase() => 'marginLeft'
    * 'test camel'.toCamelCase(' ') => 'testCamel'
    */
0

Again i didnt understand

function(u,d,t,q){ return d.toUpperCase(); }

here used only d. but where are u, t, q used?

0

Hi azegurb,

Hope this doc will explain it: Replace Doc

Please look into the Specifying a function as a parameter section for explanation of the 4 parameters sent to a anonymous func from replace

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.