Доброе время суток.

Сразу скажу что я только начинаю изучать JavaScript и с библиотеками типа JQuery еще не знаком. Поэтому по возможности подскажите решения на чистом JavaScript.

Предисловие: пытаюсь повторить дизайн одного сайта, и вот что у меня пока получилось http://bizon4iktest.zz.mu Если вы наведите на рисунок с кубками и цифрой 2011, то выедет блок, если снимите с него указатель мыши то блок заедет. Что бы так сделать я додумался только до следующего кода

В HTML в движущемся диве

onmouseover="moveLongText();" onmouseout="moveBackLongText()"

И в JS

function moveLongText() {
    clearInterval(cleaner);
    cleaner=setInterval(moveLT, 2);
}

function moveBackLongText() {
    clearInterval(cleaner);
    cleaner=setInterval(moveBLT, 2, 8);
}

function moveLT() {
  marginLT=marginLT-8;
  if (marginLT >= 118) {
    text1.style.marginLeft = marginLT+'px';
  } else {clearInterval(cleaner);}
}

function moveBLT(interval) {
  marginLT=marginLT+interval;
  if (marginLT <= 549) {
    text1.style.marginLeft = marginLT+'px';
  } else {clearInterval(cleaner);}
}

Точно по такому же принципу у меня реализован и слайдер.

Суть проблемы: Если с рисунка на котором выезжает блок быстро перевести курсор на левую стрелку слайдера, то выезжающий блок замирает на пол пути. Это происходит потому что при заходе на стрелку слайдера я очищаю интервал дабы запустить его для слайдера.
Подскажите плз, как сделать что бы выезжающий див не замерал на пол пути?