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

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

  • средство выбора даты
  • количество гостей
  • количество комнат
  • количество ночей

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

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

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

введите здесь описание изображения

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

Лука


drop-down-menu jquery sliding
person luca    schedule 09.10.2011    source источник
comment
Я добился этого, просто оставив гостей и ночи открытыми, когда закрыл ящик.   -  person Sparky    schedule 09.10.2011

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

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

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

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

person zdrsh    schedule 09.10.2011

arrow_upward
0
arrow_downward

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

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

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

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

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

РЕДАКТИРОВАТЬ: используя мой ноутбук и окна с 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;
}
person adeneo    schedule 09.10.2011
comment
Я не использовал настоящие кнопки, а вместо этого использовал div('.fake-select') (для проблем с нарезкой). - person luca; 09.10.2011
comment
Если вы проверите jsfiddle, там будет моя точная проблема. Попробуйте навести указатель мыши на окно бронирования. Пусть оно снова закроется, но перед закрытой анимацией оно снова завершится. Если вы попытаетесь щелкнуть одну из моих кнопок выбора, вы можете видеть, что списки сломаны - person luca; 09.10.2011