Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Проблема с анимацией

Автор: artsb 1.7.2009, 11:05

Всем привет. Есть див, внутри которого много изображений. При наведении на изображение, остальные затемняются, сверху появляется другой див с увеличенным изображением и описанием. Проблема в том, что если быстро навести на любое из крайних изображении и убрать курсор, верхний див так и остаётся висеть, т. е. mouseleave не срабатывает (юзаю jQuery). Пробовал вешать mouseleave на большой див (с изображениями), но это событие возникает каждый раз при наведении курсора на верхний див. А это не есть гуд... Я приклейл скрипт. Посмотрите если не сложно. Может ещё что посоветуете. Я, просто, в Яве не силён...

Автор: ksnk 1.7.2009, 17:43

Код  function showcnt() { ...         var ob = $("<table class='mr_cnt'><tr><td class='cnt_em'></td><td><img class='cnt_img'  ... Правильно ли я понял, что при каждом "наезде мышкой" создается новый объект table. Не важно, создавался ли он уже или нет? Повозил мышкой - получил лишнюю сотню таблиц... Много ДОМ-элементов - это много рессурсов на их отрисовку-хранение... Может в этом и дело.   imho, нужно создать либо один объект "увеличенный просмотр" и позиционировать его по мере надобности с изменением сорца картинок, либо сгенерировать сразу все "увеличенные просмотры" и показывать/ скрывать их когда надо. У меня некие глюки иногда наблюдались только в IE, если повозить мышом по крайним картинкам и резко убирать мышь с окна броузера...  еще. вот такие конструкции t_im.animate(... стоит заменить на такие Код t_im.stop(true,true).animate(... Просто множество анимаций пытаются выполнится последовательно. Сначала одна, потом другая и если навесить их целую кучу, то они так и будут "перемигиваться", пока не кончится очередь. Впрочем, тут мне не удалось получить эффект "перемигивания", так как объект всегда заново пересоздается, но это типичная ситуация. так писать не нужно ob.css("top", (parseInt(ob.css("top")) - (150 - this.offsetHeight)) + "px"); Можно так ob.css("top", ob.css("top") - (150 - this.offsetHeight)); проблема, может быть еще и в этом Код строка 118: ob.show(300); Просто когда срабатывает show, элемент "разворачивается" с левого верхнего угла до правого нижнего. За это время мышка может с этой области убежать и mouselive никто не дождется...

Автор: artsb 1.7.2009, 18:41

ksnk, спасибо за помощь! Цитата(ksnk @  1.7.2009,  17:43 ) Правильно ли я понял, что при каждом "наезде мышкой" создается новый объект table. Не важно, создавался ли он уже или нет? Повозил мышкой - получил лишнюю сотню таблиц... Много ДОМ-элементов - это много рессурсов на их отрисовку-хранение... Может в этом и дело. Там же событие mouseenter. В jQuery оно срабатывает один раз. Это же не mousemove. Цитата(ksnk @  1.7.2009,  17:43 ) нужно создать либо один объект "увеличенный просмотр" и позиционировать его по мере надобности с изменением сорца картинок Пробовал. (хотя может и не не правильно ) Если возюкать мышью, получаются ужасные мерцания. Таблицу "колбасит". Цитата(ksnk @  1.7.2009,  17:43 ) стоит заменить на такие Спасибо. Учту. Цитата(ksnk @  1.7.2009,  17:43 ) так писать не нужно А ob.css("top") разве не строку возвращает (вида "150px")? Типа как e.style.top. Цитата(ksnk @  1.7.2009,  17:43 ) За это время мышка может с этой области убежать и mouselive никто не дождется...  Это первое, что пришло в голову. Но как бы это сделать по человечески... Кстати, я уже немного подправил, теперь прошлой проблемы нет. Но иногда возникает другая. Не одно, так другое...

Автор: ksnk 1.7.2009, 20:19

Цитата(artsb @  1.7.2009,  18:41 ) Там же событие mouseenter. В jQuery оно срабатывает один раз. Это же не mousemove.  Один, но каждый раз при попадании в элемент. Намотать 10 кругов по 10 картинкам - дело 10 секунд.  потом на каждой картинке будут десятки скрытых "увеличенных изображений", которые будут сражаться за какие-нибудь события и тормозить в меру возможностей... Цитата(artsb @  1.7.2009,  18:41 ) А ob.css("top") разве не строку возвращает (вида "150px")?  да, действительно, возвращает строку... я чего-то думал, что число. Зато приписывать 'px' точно не надо. Оно само подставиться... Добавлено через 1 минуту и 20 секунд Цитата(artsb @  1.7.2009,  18:41 ) Кстати, я уже немного подправил, теперь прошлой проблемы нет. Но иногда возникает другая. Ну и какая она - другая? ;-)

Автор: artsb 1.7.2009, 20:53

Цитата(ksnk @  1.7.2009,  20:19 ) Один, но каждый раз при попадании в элемент. Намотать 10 кругов по 10 картинкам - дело 10 секунд. Неа  Внимательней посмотри  Опа: Код $("." + this.className).hide(300); this.parentNode.removeChild(this); Цитата(ksnk @  1.7.2009,  20:19 ) да, действительно, возвращает строку Уже проверил  Цитата(ksnk @  1.7.2009,  20:19 ) Ну и какая она - другая? ;-)  Сейчас ещё малость доделаю кое-что и выложу.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)