Question

here is the Fiddle http://jsfiddle.net/SunMercury/pmhFv/

How can I declare an object id and startValueX, startValueY, endValueX, endValueY first

then it will animate using my declared values?

animateMe($(‘#box1’), 2000);

to

animateMe($(‘#box1’), startValueX, startValueY, endValueX, endValueY, 2000);

Answer 1

You practically have it… Just add your parameters to your function declaration, and replace the hard-coded values in the function with those parameter names:

var animateMe = function(targetElement, sX, sY, eX, eY, speed){
    $(targetElement).css({ left: sX+"px", top: sY+"px" }).fadeIn(200, function() {
        $(targetElement).animate({
            'left': eX+"px",
            'top': eY+"px"
        }, {
            duration: speed,
            complete: function() {
                $(this).fadeOut(200, function() {
                    animateMe(this, sX, sY, eX, eY, speed);
                })
            }
        }).fadeOut(200);
    });
};

animateMe($('#box1'), 300, 400, 40, 50, 2000);

http://jsfiddle.net/bQVUH/