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

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

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

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

10 комментариев:

  1. Смотря как скрывать:
    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. Скрытие присвоением display значения none не резервирует место для объекта на экране, что иногда необходимо. Свойство visibility со значением hidden, в свою очередь это делает - объект просто не рендерится.

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

    ОтветитьУдалить
  5. чего и требовалось ожидать - НИХУЯ НЕ РАБОТАЕТ

    ОтветитьУдалить
    Ответы
    1. что именно у вас не работает?

      Удалить
    2. голова у него не работает=)

      Удалить
    3. парень разочаровался в jquery видимо

      Удалить
  6. как использовать с if else ?

    ОтветитьУдалить
  7. Анонимный6 мая 2014 г., 16:42

    if($('#elemnt').is(":visible"))
    {
    //do something
    }
    else
    {
    //do something
    }

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