bxSlider внутри display: none

Я потихоньку становлюсь настоящим спецом по bxSlider'у. Сегодня рассмотрим следующую ситуацию: нам нужно, чтобы слайдер изначально был скрыт, и проявлялся только при клике на каком-нибудь внешнем элементе.
Примерно так:
1#246 - empeiria-game_net_character_add
2#247 - empeiria-game_net_character_add

А вместо этого получаем какую-то фигню:
#248 - empeiria-game_net_character_add

После долгих разборок доподлино устанавливаем, что проблема связана с display: none на контейнере, который устанавливается сразу при загрузке страницы. Из-за этого слайдер не успевает рассчитать свою ширину и схлопывается. Оптимально, конечно, поменять слайдер или отказаться от сокрытия контейнера, но меня выручил такой костыль сразу после кнопок:

setTimeout(function()
{
  $('#male').addClass('invisible');
  $('#female').addClass('invisible');
}, 1);

Даже задержки в милисекунду оказалось достаточно, чтобы блок рассчитался и скрылся, а если задержку не выставлять, то ничего не выходит. Заметить невооруженным взглядом такую паузу невозможно. Немного опасаюсь артефактов на каких-нибудь старых мобильниках и доисторических браузерах, но пока, вроде, все нормально.

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.