пятница, 26 августа 2011 г.

jQuery. Проверить видимость элемента на странице (видимый/невидимый)

Для того чтобы проверить видимый элемент или нет, можно воспользоваться двумя способами:

Допустим, у нас есть скрытый элемент с id="test":
$("#test").is(":visible") => false
или:
$("#test").is(":hidden")  => true

4 коммент.:

  1. АнонимныйJan 4, 2012 07:13 AM

    Смотря как скрывать:
    div id="test" style="visibility: hidden"
    так же как и
    div id="test" style="opacity: 0"
    проверка
    $(function(){alert($("#test").is(":visible"))});
    покажет нам true.
    Все потому, что jQ (с версии 1.3 вроде бы) скрытыми считает элементы, которые
    1. display:none
    2. type="hidden"
    3. ширина и высота которых равна 0
    4. предок елемента попадает под условия (1-3).

    ОтветитьУдалить
  2. обычно так и скрывают, если вы делаете так: $(selector).hide() то все правильно находит или же вы делаете $(selector).faedOut(), так как методы анимации которые скрывают элементы - в конце анимации будут присвоены display:none, то есть под условие опять попадают.

    Нужно более грамотно скрывать элементы и все работает. Если прозрачность выставляется через анимацию вручную, то нужно в ее конце всеравно ставить display:none, это несложно - особенно если создавать новую jQuery функцию

    ОтветитьУдалить
  3. АнонимныйJan 5, 2012 01:10 AM

    Скрытие присвоением display значения none не резервирует место для объекта на экране, что иногда необходимо. Свойство visibility со значением hidden, в свою очередь это делает - объект просто не рендерится.

    ОтветитьУдалить
  4. если необходимо резервировать место - можно просто обвернуть элемент в контейнер заданного размера, либо же просто реализовать свой метод $(selector).isHidden() который может проверять дополнительные опции элемента

    ОтветитьУдалить