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

461

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

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

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

Мой JS как есть:

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

    function hideTestElement(){
        $('#testElement').fadeOut('fast');
    }
</script>

Мой HTML, поскольку я хотел бы иметь его:

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

My JS, как хотелось бы, хотя чистый jQuery будет приятным:

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

Любая помощь с благодарностью получила..

Теги:

3 ответа

709
Лучший ответ

Вы ищете:

.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');
}
Поделиться
  • 0
    Можете ли вы использовать это свойство для вызова функции, как только элемент станет видимым?
  • 0
    Знаете ли вы, будет ли это работать, если родитель не виден, потому что технически, если родитель не виден, то элемент не виден.
Показать ещё 6 комментариев
38

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

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

Здесь демо.

Поделиться
  • 14
    Это один из тех хитрых ответов, где вопрос однозначно задает вопрос, но лучший подход для ФП - другой.
23 
if($('#testElement').is(':visible')){
    //what you want to do when is visible
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню