[Vulkan]

Пример правильной анимации элемента:

<style type="text/css">
div {background:#eeeeee; border:1px black solid; width:50px; height:50px; position:absolute; top:50px;}
</style>

<script type="text/javascript">
function delta(progress) {
    return progress;
}

function animate(element){
var from = 0; // Начальная координата X
var to = 500; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта

setTimeout(function() {
    var now = (new Date().getTime()) - start; // Текущее время
    var progress = now / duration; // Прогресс анимации

    var result = (to - from) * delta(progress) + from;

    element.style.left = result + "px";

    if (progress < 1) // Если анимация не закончилась, продолжаем
        setTimeout(arguments.callee, 10);
}, 10);
}
</script>

<div id="example" style="left:0px;" onclick="animate(this)">кликни на меня</div>

Подробнее читай в статье "Основы программной анимации на JavaScript".

А по выделению:
Из той статьи пример:

<div onmouseup="alert($selection.getText())" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
	Соберем микс из <b>жирности</b>, <em>курсива</em> и <a href="#">ссылки</a> и повыделяем здесь.
</div>

<script type="text/javascript">//<![CDATA[
$selection = {
	getText : function() {
		var txt = '';
		if (txt = window.getSelection) {
			txt = window.getSelection().toString();
		} else {
			txt = document.selection.createRange().text;
//			document.selection.empty();
		}
		return txt;
	}
}
//]]>
</script>