jquery скользящее меню открытия / закрытия анимации проблема - PullRequest
Новая
       11

jquery скользящее меню открытия / закрытия анимации проблема

0 голосов
/ 09 октября 2011

Я проверяю это на местном: http://jsfiddle.net/fYkMk/1/ Это форма бронирования, которая открывается при наведении курсора мыши (маска бронирования) и закрывается, когда мышь покидает ее. Имеет 4 поля:

  • DatePicker
  • количество гостей
  • Количество номеров
  • количество ночей

последние три поля - это скользящие меню, которые открываются нажатием на соответствующий значок.

Эти скользящие анимации работают до тех пор, пока пользователь не решит снова "навести курсор мыши", затем "навести курсор мыши" и "навести курсор мыши" на элемент div с маской резервирования до того, как анимация открытия / закрытия будет закончена.

Так что случается, что списки разбиты, и я могу видеть только их часть. [См. Изображение ниже]

enter image description here

Надеюсь, вы поможете мне с этим. Спасибо

Лука

Ответы [ 2 ]

0 голосов
/ 09 октября 2011

jQuery animate устанавливает видимость скрытой, поэтому вы должны сбрасывать ее каждый раз, когда это выглядит как проблема. Например здесь: 

 $('.booking-mask').mouseenter(function(){
                mouseOverBooking = true;
                $(this).css('overflow', 'visible');
                openBookingMask();
                });

Просто поставь 

$(this).css('overflow', 'visible');

в нужных местах, чтобы работать более плавно.

обновленная скрипка

0 голосов
/ 09 октября 2011

Я не могу видеть эти три кнопки в вашем примере, но попробуйте внедрить .stop(true, true) в своем коде, и если анимации сталкиваются, попробуйте настроить другую анимацию qeue, я считаю, что jQuery по умолчанию - "fx". Существуют также функции .qeue () и .deqeue (), которые могут помочь вам, зайдите на сайт jQuery и прочитайте документацию или подождите и посмотрите, если кто-то умнее, чем я, это выяснит.

Если я правильно понимаю, выпадающее меню исчезает позади основного сайта / фона на одну точку, и это на самом деле выглядит для меня гораздо больше как проблема css, возможно, что-то связанное со скрытым переполнением. 

.choose-list li{overflow: visible; z-index: 9999;}

.choose-list li:hover{
    background:#8B753B;
    color:white;
    overflow: visible;
}

Это исправить?

РЕДАКТИРОВАТЬ: используя мой ноутбук и Windows с FF, я понимаю, о чем вы говорите; -)

Мне кажется, проблема в том, что .booking-mask переходит к скрытому переполнению, может быть jQuery Toggle или что-то еще, что вы делали в css, но добавление важных исправлений для меня в скрипке, например так: 

.booking-mask{
    background: red;
    height: 58px;
    margin: 44px 0 0;
    position: fixed;
    right:0;
    top: 0;
    z-index: 3;
    overflow:visible!important;
    /*padding:0;*/
    color:white;
}
...