Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как реализовать движение двух блоков одновременно? (https://javascript.ru/forum/dom-window/42636-kak-realizovat-dvizhenie-dvukh-blokov-odnovremenno.html)

Bizon4ik 04.11.2013 01:04

Как реализовать движение двух блоков одновременно?
 
Доброе время суток.

Сразу скажу что я только начинаю изучать 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);}
}


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

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

Bizon4ik 04.11.2013 23:11

Решил за счет того что в меню с выезжающим текстом начал использовать setTimeout

action = 0;
document.getElementById('js-collection1-text1').onmouseover = function moveLongText() {action = 1; moveLT();}
document.getElementById('js-collection1-text1').onmouseout  = function moveBackLongText() {action = 0; moveLT();}

function moveLT() {
   if (action==1) {
    if (marginLT >= 118) {
		marginLT=marginLT-8;
		text1.style.marginLeft = marginLT+'px';
		setTimeout(moveLT, 1);
	 }
   } else {
      if (marginLT <= 549) {
		marginLT=marginLT+8;
		text1.style.marginLeft = marginLT+'px';		
		setTimeout(moveLT, 1);
	   }
     }   
}


Часовой пояс GMT +3, время: 01:12.