Цикл for(i=0;i<5;i++) не ждёт пока анимация завершится.
Цикл мгновенно отрабатывает 5 раз и заканчивается, animate по сути 5раз получает одну команду, ты даже мышкой пошевелить неуспеваешь.
Дальше анимация ползёт сама по себе, ибо она привязана к таймеру. Ей начхать что твоя программа завершилась.
Чтобы работало, вместо цикла используй
setInterval или лучше
setTimeout с периодом 5000.
Либо юзай
callback [вызов] по завершению анимации, из которого ты будешь запускать новую анимацию.
Вот те пример c callBack написанный от балды
//глобальная переменная X
X=0;
//обьявим счётчик количества повторений анимаций.
i=0;
//обработчик события click
$("#div1").click(function(e){
//обрати внимание x устанавливается внутри обработчика click а не снаружи.
X = e.pageX;
// я заремарил твой алгоритм вычисления, ибо не могу понять что он делает
//var a = e.pageX - this.offsetLeft;
//var b = e.pageY - this.offsetTop;
//c=a+b;
//X+=c;
})
//функция f будет вызываться когда анимация заканчивается, и запускать анимацию вновь, до тех пор пока i<5.
f=function(){
// если i <5 тогда запустим анимацию, когда анимация закончится, она вызовет функцию f вновь
if (i<5) $('#div1').animate( {left:X+"px"}, 5000,f);
// увеличим счётчик
i=i+1;
}
//запустим анимацию
f();
В данном примере новая анимация должна начинаться, сразу же как заканчивается старая. Тобиш твой div поползёт от текущей координаты к координате x.