Клуб API Карт

jQuery('.label').hover - не работет после открытия и закрытия балуна

katerinatlt
14 февраля 2012, 15:14

При наведении на метку срабатывает функция анимации:
YMaps.jQuery('.label').hover(
                function () {
                    YMaps.jQuery(this).stop().animate({
                        width: '122px',
                        height: '68px',
                        marginTop: '-33px',
                        marginLeft: '-25px'
                    }, 200);
                },
                function () {
                    YMaps.jQuery(this).stop().animate({
                        width: '61px',
                        height: '34px',
                        marginTop: '0',
                        marginLeft: '0'
                    }, 200);
                }
           

 

Шаблон метки: <img class="label" src="/img/label.jpg" alt="" />

ПРОБЛЕМА: анимация метки перестает срабатывать после открытия и закрытия балуна.

Сравниваю рабочую и не рабочую метку в фаербаге (не перезагружая страницу, меток на странице много), отличие только в том, что в шаблон перестает добавляться новый стиль, а hover как таковой срабатывает.
Почему так может быть?

 

5 комментариев

вы бы ссылку чтоли дали

мы бы тоже посмотрели в фаербаге

на локальном сервере к сожалению

можно предположить, что после открытия балуна объект на котором срабатывает hover удаляется, а потом создается опять, но уже без нужного обработчика... o_O

может обрабочтик через .live() назначить ?…

Загрузка страницы =>

1. До наведения на метку:

<div class="YMaps-placemark YMaps-Default YMaps-cursor-pointer" style="z-index: 110; left: 583.265px; top: 279.734px;">
    <div class="billboard">
        <img alt="" src="/img/billboard.png">

    div>div>
2. Во время наведения на метку:<div class="YMaps-placemark YMaps-Default YMaps-cursor-pointer YMaps-Hover" style="z-index: 120;...

3. После наведения на метку:<div class="YMaps-placemark YMaps-Default YMaps-cursor-pointer" style="z-index: 110; left: 583.265px; top: 279.734px;">    <div class="billboard">        <img alt="" src="/img/billboard.png" style="width: 40px; display: block; height: 41px; margin-top: 0px; margin-left: 0px; overflow: hidden;">    div>div>
4. Во время открытия балуна:<div class="YMaps-placemark YMaps-Default YMaps-cursor-pointer YMaps-Hidden" style="z-index: 210; left: 670.531px; top: 160.201px;">    <div class="billboard">        <img alt="" src="/img/billboard.png" style="width: 40px; display: block; height: 41px; margin-top: 0px; margin-left: 0px; overflow: hidden;">    div>div>
5. После закрытия балуна:
<div class="YMaps-placemark YMaps-Default YMaps-cursor-pointer" style="z-index: 110; left: 670.531px; top: 160.201px;">
    <div class="billboard">        <img alt="" src="/img/billboard.png">    div>div>
6. Во время наведения на метку:<div class="YMaps-placemark YMaps-Default YMaps-cursor-pointer YMaps-Hover" style="z-index: 120; left: 670.531px; top: 160.201px;">
    <div class="billboard">        <img alt="" src="/img/billboard.png">    div>div>
...вот тут стиль и не прописывается уже.

Повесила hover() на div.YMaps-placemark, где find() находит нужный объект, все стало работать :)

 

YMaps.jQuery('div.YMaps-placemark').hover(
                function () {
                    YMaps.jQuery(this).find('img.label').stop().animate({
                        width: '122px',
                        height: '68px',
                        marginTop: '-33px',
                        marginLeft: '-25px'
                    }, 200);
                },
                function () {
                    YMaps.jQuery(this).find('img.label').stop().animate({
                        width: '61px',
                        height: '34px',
                        marginTop: '0',
                        marginLeft: '0'
                    }, 200);
                }
            );