Плавное выполнение функции
 

Привет. есть вот этот скрипт, мб он и корявый, но работает)

<script type="text/javascript">
 (function (G) {
  
 var text1 = G.document.getElementById("text1"),
 text2 = G.document.getElementById("text2");
  
 text1.onclick = function () {
 text1.style.display = "none";
 
 text2.style.display = "block";
 };
     var timerId;
 text2.onmouseout = function () {
    timerId = setTimeout(function() {
     text1.style.display = "block";
 
 text2.style.display = "none";
    }, 2000);
     text2.onmouseover = function() {
    clearTimeout(timerId);
};
};
 }(this));
 </script>

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


и еще, у меня в одном из этих блоков поле для ввода, скажите пожалуйста, как сделать: если оно активно(используется для ввода текста) таймер не запускался даже если мышь убрана...

Использовать css3 transitions. Вместо прямого переключения свойства display менять классы.

var focus = document.activeElement;
if (text2.contains(focus)) {
    focus.onblur = function() {
        this.onblur = null;
        text2.onmouseout();
    };
} else { ... }

не знаю как это использовать, можно поподробнее?