У нас есть div высота 100% ширина 1-2рх, при попадании курсора мыши на эту полоску. Ширина увеличивается стремительно до 25рх, соотвественно когда курсор уходит - то так же стремительно причется в 1-2рх шириной полоску.

Много всякой инфы по событиям связанными с элементами формы, а вот по таким мелким анимационным не очень. Буду благодарна (+) за помощь.

Enya, Чудес, как правило, не бывает. Видимо скрипт чего-то хочет от этой полоски, или в CSS про нее чего-нибудь такое написано. Откройте страничку в FireFox с установленным FireBug и сделайте Inspect Element. Возможно, что-нибудь прояснится... 

ksnk, Вы наверное экстрасенс  

Я пять раз прочитал текст сообщения, посмотрел на название темы.... Но не смог понять чего надо.  

Если у Enya, есть такой скрипт, то, показывать, как такое сделать, вроде не нужно. А что тогда нужно?

2Ghirik - коходу ksnk вообще не экстра сэнс. Он ответил явно не на вопрос Enya.
2Enya Сейчас накидаю план, когда освобожусь напишу пример.
1. ловим onMouseOver и передаем в myJS() наш див(или ловим его в функции по id)
2. зaпускаем c задержкой по setTimeout myJS если надо
Что делает сама JS. Она узнает текущий размер div-a и если надо увеличиваетпо сеттаймаут

примерный код


Добавлено через 13 минут и 56 секунд
по ходу выполнения кода советую выкурить первых две темы факъю  данного подфорума
http://forum.vingrad.ru/faq/topic-148995.html
http://forum.vingrad.ru/faq/topic-185836/k...settimeout.html

"Коходу" первым "экстрасенсом", догадавшимся, что нужна анимация по событию, оказался KuZyagroup. Я, стало быть, вторым 

Но вот пример кода, увы, явно безграмотный. А вот рабочий вариант:

Тут все параметры анимации, а также анимируемый объект и направление анимации (сворачивать или разворачивать) хранятся в статических переменных ф-ции (чтоб не заморачиваться с привязкой this), и нет неявного eval в таймауте...

Ну да, в цирке мне, видимо, выступать пока рано. ;-)
Если изменить первые строчки функции SelenIT'а вот так
, то можно будет писать в html немного поменьше:

2SelenIT согласен написано криво, но я жн подчеркнул что это не код а направление в котором нужно писать.
П.С. 2Enya Вы хоть разобрались, а то в вашем посте( копи пастлом сделаный) JS с ошибками

Добавлено через 4 минуты и 44 секунды
2ksnk - this +setTimeout это опасная возможность словить грабли

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

в меру своего разумения js, я так полагаю, там просто объект один и ему присваиваются каждый новые параметры, в т.ч. указатель на див, а вот как сделать чтобы всё равно сворачивалось?

KuZyagroup, в том-то и фокус предложения ksnkа, что this передается только один раз, до возникновения граблей 
Грабли тут, по-моему, могут быть в другом месте - в Gecko (из-за нестандартного параметра-задержки), и то лишь если поменять аргументы местами...

bars80080, абсолютно верное замечание. Об универсальности я действительно особо не задумывался. Первая мысль - завести хеш анимируемых элементов и передавать их id (а заодно и анимировать все разом, по одному таймеру - меньше вычислений), но не исключаю, что есть решение и лучше...

SelenIT, Можно обойтись одной функцией как сейчас. Нужно только заменить setTimeout на setInterval и переписать чуть-чуть работу с ним. Ну и сбрасывать "предыдущую" анимацию в начальное состояние anim.obj.width=''.
Вот. Двигается немного глючно - зато спортивно - все в одной функции 


Это сообщение отредактировал(а) ksnk - 8.2.2008, 17:37

Для полноты картины я все-таки довел до реализации свою идею с хешем (точнее, двумя, как оказалось;) внутри ф-ции:

Заодно исправил идиотскую арифметическую ошибку с расчетом задержки для таймаута (стр. 6 в моем прошлом коде - должно быть как в стр. 4 в новом)... И чуть увеличил величину и время "выезда" табов - для наглядности.

Ох и упрямы Вы человек,SelenIT!
Класная реализация! Я как раз собирался подобную штуковину делать, а тут так красиво решено....
Спасибо.

P.S. только что то в FF не видно дивы, может я не так собрал страницу.... 


Ага, стили не правильно прикрутил... Все, работает в FF.

Это сообщение отредактировал(а) Ghirik - 9.2.2008, 07:30

А если полоску Div расположить по центру. то в какую сторону будет увеличиваться ширина?

Добавлено через 5 минут и 37 секунд
Я использовала вот этот код.

А почему увеличивается в право? а если в лево? можно?  

Можно хоть вправо, хоть влево, хоть в обе стороны. Для этого достаточно знать принципы позиционирования элементов. Тогда и js-код менять не понадобится. Вот простой пример (для "раздвижения" в обе стороны):
css:

html:




Не "лежит" у Вас душа к closures. ;) А ведь тогда можно было обойтись без обращения к глобальным данным (статическим св-вам функции). Как мне кажется, это бы позволило сделать решение более производительным.

А подскажите, пожалуйста, как height:10%; прикрутить к доктипу XHTML 1.0 Transitional.
И вообще, может у кого есть ссылочка на современное русское описание CSS. А то я чувствую, что моих знаний недостаточно... вернее, отсутствия знаний недостаточно...  

Это сообщение отредактировал(а) Ghirik - 9.2.2008, 22:40

AKS, скорее у меня мозги не всегда соображают, как ими воспользоваться . Вот и тут - параметры я еще могу представить, как заclosur'ить, но вот как через closures "захватить и удержать" сами анимированные объекты, особенно когда их много, без размножения таймеров - пардон, откровенно туплю. Буду весьма благодарен за подсказку. И за указание на промахи по части производительности тоже.

Ghirik, про CSS тут неплохой справочник, еще неплохо здесь написано. Но многое легче запоминается не по справочникам, а из практики. Например, то, что размеры в процентах наследуются только от явно указанной высоты, и если нужны проценты от экрана, то необходимо указывать 100%-ю высоту, начиная с корневого элемента - html, body { height: 100%; }. Хотя здесь это оффтопик ;)

Как там у Шерлока - "Ну, когда-то я это знал, а потом изрядно забыл"  
SelenIT, спасибо. Ни фига не оффтопик, а конкретная рекомендация по использованию кода, выложенного в этой ветке.  

Вот, я тут свой вариант нарисовал:



Ну шибко доволен результатом  
Понравилось глобализовать массив через document.getElementsByTagName. И очень легко, можно менять поведенчиские свойства всех дивов страницы через отбор по классу при начальной загрузке. Даже id не требуется.... Немного изменив основную функцию, можно приводить элементы к заданным размерам и по вертикали, а направление раскрывания определить стилями.

Особенно хорошо IE анимирует...


Это сообщение отредактировал(а) Ghirik - 10.2.2008, 01:07

Да я имел ввиду то, что можно сделать в точности, как у Вас (с сохранением ссылок на DOM-узлы в объекте), просто еще вместо хранения параметров анимации в св-вах функции anim "засунуть" их в переменные функции. Вот, примерно так:

AKS, с основными принципами позиционирования знакома, но вот сделать увеличение ширины в лево не получилось. 

AKS, 

По сравнению с таким способом у способа SelenIT'а есть большое преимущество - параметры для настройки можно писать практически в любом месте программы. а в Вашем - нужно ковыряться в исходном коде функции. т.е. Нельзя , к примеру, в библиотеку запихать , которую потом минифицируют или упакуют...

ksnk, еще напишите, что необходим интерфейс, который бы позволил принимать вводимые посетителями сайта параметры для анимации (размер, задержка). 
И зачем "ковыряться" в функции – установил нужные константы и все. А то, что варьируется можно передавать вместе с id/direction. Да и "поковыряться", если что, в функции можно – лучше, чем ковыряться в носу от безделья и лени. ;)

Enya, у Вас не получается с тем примером, что я написал вчера?

AKS, да, не вышло.

Enya, честное слово - не знаю, почему у Вас не "вышло". Вот такие правила css расположат блок (внутренний) посередине документа, а "выдвигаться" он будет влево:


А вчерашний вариант должен был позволить блоку "раздвигаться" в обе стороны. Ей богу не пойму, почему у Вас все иначе...

А для другого приложения - установил новые параметры и все...? И для третьего... А функция обязана сидеть в той html'е , в которой применяется, а совсем не в отдельной библиотеке? слишком много ограничений...
Вообще-то более разумно , imho, было бы хранить такие границы в html разметке. Вдруг кому-то понадобится оранизовать какую-то сложную систему менюшков...

ksnk, для того, чтобы функция "сидела" в библиотеке, она должна быть универсальной. Сумеете написать такую? Да нет, конечно. Даже, если получится "накропать" что-то, претендующее на готовое решение "на все времена", то это должно получиться нечто монструозное. А Вам ведь известно, к чему могут привести попытки унификации.
Если говорить конкретно о "системе менюшков", то любые эти min/max будут совершенно непригодны. Простое увеличение шрифта превратит такую "систему" в "кашу".
Я это все к тому, что js-библиотеки - это утопия. Осознание этого приходит с пониманием того, насколько нестабильно окружение, в котором должна быть выполнена js-программа. На мой взгляд, "терапия" должна иметь в своем распоряжении инструмент, заточенный под конкретную задачу. И чем он острее (тоньше, если угодно), тем он эффективнее. 
А приведенные здесь примеры все непригодны - они хороши лишь для "тренинга". В нашем случае, например, функция должна обязательно получить id элемента, а это уже немалое ограничение. Удобно ли ее использовать при установке обработчиков посредством addEventListener/attachEvent?

Это сообщение отредактировал(а) AKS - 10.2.2008, 15:36

 Ваши требования меня пугают   Следуя такой "установке" вообще ничего "универсального" делать не стоит. К тому-же универсальное на все времена или на пару ближайших проектов-сайтов, разные страницы которых вполне вероятно захотят использовать что-то такое?

Немного позанимался исследованием возможного применения такого вида всплытия, и вот к каким результатам пришел.

В варианте с хэшем можно смело использовать style.clip. Для кроссбраузерного присвоения начальных значений следует делать такую запись.



Это, если вы используете строгий или переходный доктайп.
Первая строчка по спецификации, вторая для IE(  ).
Еще лучше, эти строчки прописать прямо в тэгах.

Из JavaScript-а значения clip прописываются нормально с запятыми, и в IE, и в остальных.
Если потребуется доставать clip:rect, можно воспользоваться подобным выражением:



Эта строка достает из 'rect(auto, auto, auto, 40px)'  значение 40 и делает его числовым.

В выложенном мной варианте использовать clip у меня не получилось. Основная причина, циклическое считывание действующего значения clip:rect полностью забирает ресурсы. Но мой вариант хорошо заработал с уводом дивов в отрицательные значения, за экран. Выложить работающий код пока не могу, потому, как писал скрипт под специфическую задачу. Если потом сделаю универсальный вариант - покладу сюда.

Отлично работает ещё один вариант. Мне, кстати, он понравился больше всего.  

Вместо дивов я использовал изображения, генерируемые "на лету" php функцией (imagettftext()) и возвращаемые в скрытый фрейм. Работает это молниеносно, и очень годится для информирования в реальном времени посетителей сайта.

Примерно так...

Я прошу прощения, бессмысленный оказался пост, модераторы, удалите пожалуйста.

Это сообщение отредактировал(а) Ghirik - 15.2.2008, 22:10

SelenIT, 
Переделал ваш шикарный скрипт для себя. Он теперь у меня работает с привью картинок, пока всё симпатично.

Но вот никак не могу домыслить как сделать так чтобы картинки увеличивались пропорционально во все стороны а не от верхнего левого угла.
И вообще это реально?



зы: я грэйв диггер   

Сам допер.

Симпатично получилось: пример работы скрипта



В скрипте я переделал то что при начале анимации картинка получает абсолютное позиционирование чтобы не рушить таблицу и не сдвигать другие изображения. И чтобы совсем кавайно было добавил z-index чтобы текущее изображение не перекрывалось уменьшающимся соседним. В общем шикарный у SelenIT скрипт вышел. 

Это сообщение отредактировал(а) Onis - 14.8.2008, 23:23