Javascript-форум - Свойство transition или как переместить div c точки А в точку Б?

1. Задача следующая, нужно чтобы черный прямоугольник(korobka2) начинал свое движение с места белого прямоугольника (korobka) и следовал при нажатии на фон за курсором. А он с сожалению вылетает из (top:0; left:0;).

2. А вторая задача, при остановке черный прямоугольник(korobka2) вновь превращался в белый прямоугольник (korobka).

Вот пример: http://troinfo.ru/000/primer.html

<html>
<head>
<script type="text/javascript" src="core_engine/scriptjava.js"></script>
<script type="text/javascript" src="core_engine/cartoon_background.js"></script>
<script type="text/javascript" src="core_engine/cartoon_rubin.js"></script>
<script type="text/javascript" src="core_engine/cartoon_background2.js"></script>
</head>
<body onmousemove="mouseShowHandler(event);">
	
	
	<style>
		.korobka {
			position: absolute;
			top: 85;
			left: 240;
			opacity: 1;
		}
		
		.korobka2 {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			transition: left 3s cubic-bezier(0.0,0.5,0.5,1.0), top 3s cubic-bezier(0.0,0.5,0.5,1.0);
		}
		
		.fon {
			position: absolute;
			top: 0;
			left: 0;
		}
		
		.input_c {
			position: absolute;
			top: 300;
		}
		
		.input_c2 {
			position: absolute;
			top: 350;
		}
	</style>

		
	<div class="fon"><img width="640" height="190" src="fon.jpg" onclick="funkcia(event)"></div>
	<div id="korobkaid" class="korobka"><img width="160" height="20" src="box.jpg"></div>
	<div id="korobka2id" class="korobka2"><img width="160" height="20" src="box2.jpg"></div>
	
	<div class="input_c"><input type="text" id="mouseX"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="mouseY"></div>
	<div class="input_c2"><input type="text" id="divX" value=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="divY" value=""></div>
	
<script>
	
	
	function getOffsetSum(elem) {          // Определяем положение DIV (более простой вариант который работает во многих браузерах)
		var top=0, left=0
		while(elem) {
			top = top + parseFloat(elem.offsetTop)
			left = left + parseFloat(elem.offsetLeft)
			elem = elem.offsetParent        
		}	
		
		document.getElementById('divY').value = top;
		document.getElementById('divX').value = left;
		
		return {top: Math.round(top), left: Math.round(left)}
	}

	
	
	function getOffsetRect(elem) {          // Определяем положение DIV
		// (1)
		var box = elem.getBoundingClientRect();
		
		// (2)
		var body = document.body;
		var docElem = document.documentElement;
		
		// (3)
		var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
		var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
		
		// (4)
		var clientTop = docElem.clientTop || body.clientTop || 0;
		var clientLeft = docElem.clientLeft || body.clientLeft || 0;
		
		// (5)
		var top  = box.top +  scrollTop - clientTop;
		var left = box.left + scrollLeft - clientLeft;
		
		document.getElementById('divY').value = top;
		document.getElementById('divX').value = left;
		
		return { top: Math.round(top), left: Math.round(left) };
	}
	
	
	function getOffset(elem) {
		if (elem.getBoundingClientRect) {
			// "правильный" вариант
			return getOffsetRect(elem)
		} else {
			// пусть работает хоть как-то
			return getOffsetSum(elem)
		}
	}

	
	
	
	
	function mouseShowHandler(e){            // Определяем положение мышки
		e = e || window.event;
		
		if (e.pageX == null && e.clientX != null ) { 
			var html = document.documentElement;
			var body = document.body;
			
			e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
			e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
		}
		
		document.getElementById('mouseX').value = e.pageX;
		document.getElementById('mouseY').value = e.pageY;
		
		var top2 = e.pageX;
		var left2 = e.pageY;
		
		return { top2: e.pageY, left2: e.pageX };
	}
	
	
	function funkcia(event){
		var a=this.getOffset(korobkaid);
		var b=this.mouseShowHandler(event);    
		
		// здесь требуется, чтобы korobka2id не с нулевых координат (top:0; left:0;) двигалась, 
		// а начинала свое движение с месте где расположен белый блок(korobkaid) и в сторону курсора
		
		
		//присваеваем новые координаты белому квадрату
		korobka2id.style.top = a.top;
		korobka2id.style.left = a.left;
		document.querySelector('.korobka2').style.opacity = 1;
		
		document.querySelector('.korobka').style.transition = 'opacity 0s';  // исчезновение белого блока
		document.querySelector('.korobka').style.opacity = 0;
		
		// двигаемся за курсором мыши
		document.querySelector('.korobka2').style.left = b.left2 - 80;  // где 80 половина длины korobka2
		document.querySelector('.korobka2').style.top = b.top2 - 10;  // где 10 половина высоты korobka2
		
		korobka2_id.addEventListener('transitionend', funkcia2, true); /* на будущее */
	}
	
	
	function funkcia2(){  // здесь требуется по прекращению движения белого квадрата(korobka2id), 
	                      //чтобы он превращался в черный(korobkaid)
		var div2=this.getOffsetRect(korobka2id);
		
		document.querySelector('.korobka').style.transition = 'opacity 0s';
		document.querySelector('.korobka').style.opacity = 1;
		document.querySelector('.korobka').style.top = div2.top;
		document.querySelector('.korobka').style.left = div2.left;
		document.querySelector('.korobka2').style.opacity = 0;
	}
</script>

	
</body>
</html>