Определить, является ли элемент видимым с помощью jQuery

Используя .fadeIn() и .fadeOut(), я скрывал/отображал элемент на своей странице, но с двумя кнопками, одна для скрытия и одна для показа. Теперь я хочу иметь одну кнопку для переключения обоих.

Мой HTML/JavaScript как есть:

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>

function showTestElement() {
  $('#testElement').fadeIn('fast');
}

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}

Мой HTML/JavaScript, как я хотел бы иметь:

<a onclick="toggleTestElement()">Show/Hide</a>

function toggleTestElement() {
  if (document.getElementById('testElement').***IS_VISIBLE***) {
    $('#testElement').fadeOut('fast');
  } else {
    $('#testElement').fadeIn('fast');
  }
}

Как я могу определить, является ли элемент видимым или нет?

Ответы

Ответ 1

Вы ищете:

.is(':visible')

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

if($('#testElement').is(':visible')) {
    // Code
}

Важно отметить, что если какой-либо из родительских элементов целевого элемента скрыт, то .is(':visible') для дочернего объекта вернет false (что имеет смысл).

jQuery 3

:visible имеет репутацию довольно медленного селектора, поскольку он должен проходить дерево DOM, проверяя кучу элементов. Однако хорошие новости для jQuery 3, как этот пост объясняет (Ctrl + F для :visible):

Благодаря какой-то детективной работе Пола Ирриша в Google мы выявили некоторые случаи, когда мы могли пропустить кучу дополнительной работы, когда пользовательские селектора типа: visible используются много раз в одном документе. Этот конкретный случай теперь в 17 раз быстрее!

Имейте в виду, что даже с этим улучшением селектора типа: visible и: hidden могут быть дорогими, потому что они зависят от браузера, чтобы определить, действительно ли элементы отображаются на странице. Это может потребовать, в худшем случае, полного пересчета стилей CSS и макета страницы! Хотя мы не препятствуем их использованию в большинстве случаев, мы рекомендуем тестировать ваши страницы, чтобы определить, вызывают ли эти селекторы проблемы с производительностью.

Расширяясь еще до вашего конкретного варианта использования, существует встроенная функция jQuery, называемая $.fadeToggle():

function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}

Ответ 2

Нет необходимости, просто используйте fadeToggle() для элемента:

$('#testElement').fadeToggle('fast');

Здесь демо.

Ответ 3

if($('#testElement').is(':visible')){
    //what you want to do when is visible
}