Форум Сайтостроение Веб-строительство

jQuery не сразу срабатывает изменение свойст css

S1
На сайте с 28.03.2010
Offline
72
spider13
889

Код простой 

      var ul = $(this).find('ul');

      var ulWrap = $(this).find('.catalog_filters_group-wrap');

      $(this).find('li').eq(9).nextAll('li').addClass('is-hidden');

      ul.height(ul.height());

      ulWrap.height(ulWrap.height());

Проблема данного когда, что иногда(не всегда) в хроме(на остальных браузерах не пробовал) родительский блок ul отображается в полную высоту(на все 40 элементов, хотя показываются только первые 9, остальный скрыты). Решить проблему вышло так. 

      var ul = $(this).find('ul');

      var ulWrap = $(this).find('.catalog_filters_group-wrap');

      $(this).find('li').eq(9).nextAll('li').addClass('is-hidden');

      setTimeout(function () {

        ul.height(ul.height());

        ulWrap.height(ulWrap.height());

      }, 1);

Но почему такая проблема? Кто может ответить?

ICQ: 3533966 | Skype: spider13software | E-Mail: admin@spider13.net | Telegram: spider13software| Разработчик Node.js (https://spider13.net/) | Заметки онлайн (https://notes.spider13.net/)
Aisamiery
На сайте с 12.04.2015
Offline
293
Aisamiery
#1

оберните в $(document).ready(function() {...})

Разработка проектов на Symfony, Laravel, 1C-Bitrix, UMI.CMS, OctoberCMS
S1
На сайте с 28.03.2010
Offline
72
spider13
#2
Aisamiery:
оберните в $(document).ready(function() {...})

Если все было бы так просто, я бы сюда не писал. Все обернуто.

Проблема в том, что срабатывает через раз.

WEMASTER
На сайте с 16.08.2012
Offline
95
WEMASTER
#3
spider13:
Если все было бы так просто, я бы сюда не писал. Все обернуто.

Проблема в том, что срабатывает через раз.

Ну так зачем вы установили задержку в 1 миллисекунду ?

Браузер просто физически не успеет добавить классы к элементам, сделать подсчет высоты с учетом видимости по css и отрисовать результат.

Вот так должно работать (задержка пол секунды).


var ul = $(this).find('ul'); 
var ulWrap = $(this).find('.catalog_filters_group-wrap'); 
$(this).find('li').eq(9).nextAll('li').addClass('is-hidden'); 
setTimeout(function () {
	ul.height(ul.height()); 
	ulWrap.height(ulWrap.height()); 
}, 500);
S
На сайте с 13.10.2014
Offline
171
silicoid
#4

мне вообще не понятна вот эта конструкция

setTimeout(function () {
	ul.height(ul.height()); 
	ulWrap.height(ulWrap.height()); 
}, 1);

От таких конструкций вообще надо отказываться в пользу

$(window).bind('load',function(){

});

отличие window.load от document.ready состоит в том, что последняя срабатывает после построения дерева, а первая после построения дерева dom и рендера изображений.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий