HTML+CSS+JavaScript

Доброго времени суток!
Делаю вертикальное выезжающее меню. При наведении мышкой div должен плавно расшириться на заданое число пикселов, и поменять прозрачность. Нашел 2 скрипта, которые по одтельности работают, а вместе - нет. Неисправность такая:
Div реагирует на мышку только один раз. На последующие onmouseover стоит на месте.
Спасибо всем, кто ответит.

Скрипт изменения прозрачности

var t, t2, obj, op; function appear(objId, x)   // x - конечное значение прозрачности {     var obj = document.getElementById(objId);     op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;     if(op < x) {         clearTimeout(t2);         op += 0.1;         obj.style.opacity = op;         obj.style.filter='alpha(opacity='+op*100+')';         t=setTimeout('appear(\''+objId+'\', '+x+')', 80);     } } function disappear(objId, x) {     var obj = document.getElementById(objId);     op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;     if(op > x) {         clearTimeout(t);         op -= 0.1;         obj.style.opacity = op;         obj.style.filter='alpha(opacity='+op*100+')';         t2=setTimeout('disappear(\''+objId+'\', '+x+')', 80);     } }

Скрипт сдвига контейнера

function menuForward() {     size = parseInt(document.getElementById("f").style.width.replace("px", "")) // ширина div     if(size > 200) { clearInterval(move12) }     move11 = setInterval(menuForwardEngine, 8)     menuForwardEngine()     } function menuForwardEngine() {     size += 1     document.getElementById("f").style.width = size +"px"     if(parseInt(document.getElementById("f").style.width) >= 300) { clearInterval(move11) }     } function menuBackward() {     clearInterval(move11)     size = parseInt(document.getElementById("f").style.width)     move12 = setInterval(menuBackwardEngine, 8)     menuBackwardEngine()     } function menuBackwardEngine() {     size -= 1     document.getElementById("f").style.width = size +"px"     if(parseInt(document.getElementById("f").style.width) <= 200) { clearInterval(move12) }     }

Подскажите, пожалуйста, в чем может быть проблема.

Вы нашли два ОЧЕНЬ ПЛОХИХ скрипта.

Во-первых, использовать методы parseInt () и parseFloat () в динамических скриптах - это дурной тон: оба эти метода жутко тормозные (весьма медленно выполняются). В 8 (и даже в 80) миллисекунд могут не уложиться на медленных машинах.
И вообще ВСЕ скрипты с сайта http://easywebscripts.net/ написаны жутко неграмотным дилетантом (включая и тот, который вы пытаетесь использовать - http://easywebscripts.net/javascript/opacity.php).

Во-вторых, совершенно непонятно, зачем вызывать одновременно ДВА экземпляра одной и той же функции. Это же просто бред:

move11 = setInterval(menuForwardEngine, 8) menuForwardEngine() //ЗАЧЕМ??? Строчкой выше функция уже вызвана. и move12 = setInterval(menuBackwardEngine, 8) menuBackwardEngine() //ЗАЧЕМ??? Строчкой выше функция уже вызвана.

----------------------
Событий у вас всего ДВА:
1. наведение мыши
2. отведение мыши

Действий по этим событиям у вас тоже всего ДВА:
1. плавное увеличение размера и прозрачности
2. плавное уменьшение размера и прозрачности

Следовательно, функций у вас должно быть всего ДВЕ.
Каждая из них должна ОДИН раз запускаться через таймер и всякий раз каждая из них должна отключать таймер другой функции.

-----------------------
Если укажете всего ЧЕТЫРЕ показателя:
1. начальная прозрачность; 2. конечная прозрачность
3. начальная ширина; 4. конечная ширина
то я легко изменю эти самые ДВЕ функции под ваши нужды (заменю показатели прозрачности 50 и 100 на ваши и добавлю по одной строчке на изменение ширины).
Функции мною уже написаны здесь - http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=69722

Прозрачность от 10% до 100%. А ширина от 250px до 300px.
В Вашем скрипте обрабатывается изображение, можно ли применить скрипт к div (меня смущает параметр "Lang")?
Вы не могли бы посоветовать книгу или, возможно, автора, чтобы начать осваивать JS? Желательно, чтобы разжевано было от и до, потому что изучаю самостоятельно, а уточнить ньюансы не у кого, разве что здесь иногда.... :)

<head> <script> var Tu, Td; function f_Up () { clearTimeout (Td); var obj = document.getElementById ('P'), opc = obj.lang * 1, brs = (navigator.userAgent.indexOf ('MSIE') >= 0); if (opc < 100)    {    if (brs) obj.style.filter = 'alpha(opacity=' + ++opc + ')'; else obj.style.opacity = .01 * ++opc;    obj.lang = opc; obj.style.width = (250 + 5 * (opc - 10) / 9) + 'px'; Tu = setTimeout (f_Up, 20);    } else clearTimeout (Tu); } function f_Dn () { clearTimeout (Tu); var obj = document.getElementById ('P'), opc = obj.lang * 1, brs = (navigator.userAgent.indexOf ('MSIE') >= 0); if (opc > 10)    {    if (brs) obj.style.filter = 'alpha(opacity=' + --opc + ')'; else obj.style.opacity = .01 * --opc;    obj.lang = opc; obj.style.width = (250 + 5 * (opc - 10) / 9) + 'px';  Td = setTimeout (f_Dn, 20);    } else clearTimeout (Td); } </script> </head> <body> <div style="background-color: black; width: 250px; height: 100px; filter: alpha(opacity=10); opacity: .1" lang="10" id="P" onmouseover="f_Up ()" onmouseout="f_Dn ()"> </div> </body>

lang - это атрибут тега, устанавливающий используемый в теге язык. По своему прямому назначению этот атрибут практически никогда и никем не используется. "Прелесть" этого атрибута в том, что он (как и, например, атрибут style) поддерживается АБСОЛЮТНО ВСЕМИ тегами HTML.
Так что не смущайтесь :-)
Ну а если всё-равно смущаетесь, то держите вариант без использования этого атрибута:

<head> <script> var Tu, Td, OPC = 10, BRS = (navigator.userAgent.indexOf ('MSIE') >= 0); function f_Up () {clearTimeout (Td); var obj = document.getElementById ('P'); if (OPC < 100) {if (BRS) obj.style.filter = 'alpha(opacity=' + ++OPC + ')'; else obj.style.opacity = .01 * ++OPC; obj.style.width = (250 + 5 * (OPC - 10) / 9) + 'px'; Tu = setTimeout (f_Up, 20)} else clearTimeout (Tu)} function f_Dn () {clearTimeout (Tu); var obj = document.getElementById ('P'); if (OPC >  10) {if (BRS) obj.style.filter = 'alpha(opacity=' + --OPC + ')'; else obj.style.opacity = .01 * --OPC; obj.style.width = (250 + 5 * (OPC - 10) / 9) + 'px'; Td = setTimeout (f_Dn, 20)} else clearTimeout (Td)} </script> </head> <body> <div style="background-color: black; width: 250px; height: 100px; filter: alpha(opacity=10); opacity: .1" id="P" onmouseover="f_Up ()" onmouseout="f_Dn ()"> </div> </body>

Невероятно красиво! Огромное спасибо за то, что уделили моей проблеме столько времени. А что на счет литературы, посоветуете что-нибудь? Может и я когда-нибудь такие вещи делать научюсь... :)

Специальной литературой никогда не пользовался.
Предпочитаю работать с первоисточниками.
На сайте Майкрософта http://msdn.microsoft.com/en-us/library/default.aspx в разделе Web Development имеется полное и хорошо структурированное описание языка JScript (Windows Script Technologies), а также абсолютно все объекты, свойства, события и методы динамической модели документа (подраздел HTML and CSS).

Оба этих подраздела имеются в виде справочников, которые можно, скачав однажды, использовать на локальном компьютере - http://code.google.com/p/mvod/downloads/detail?name=JSCRIPT5.CHM и http://www.esnips.com/doc/1a30942f-f1bf-45b1-b7ba-7083a97da931/HTMLREF

Язык JScript от Майкрософта практически ничем не отличается от Javascript'a, который поддерживают FF и Opera. Различия же в динамической модели этих браузеров от MSIE можно "отловить" на сайте https://developer.mozilla.org/En.


Английский язык источников особо смущать не должен:
- всё, во-первых, примитивно;
- во-вторых, для каждого понятия есть рабочий пример, из которого становится ясна суть;
- в-третьих, в крайнем случае поможет http://translate.google.com/.

Большое спасбо! Файлы скачал, буду разбираться. А на счет английского - ничего страшного, уже приходилось музыкальный софт по английскому users guide осваивать.

jQuery - Бер Бибо, Иегида Кац. Книга о библиотеке jQuery - аним. эффекты и много другого.

ОК. Только деньжат немного подсобираю и поздравлю себя таким образом с Новым годом! :)