jQuery - лучший способ скрыть элемент? (чтобы элемент не мигал, прежде чем его скрыть)

Я помню, что в какой-то момент у Opera ( Mostlikely it was Safari instead. ) была проблема: если вы использовали .hide() для элемента, он ненадолго мигал, прежде чем фактически скрыл элемент.

Теперь, если вы не хотите игнорировать тех, у кого по какой-то причине js не включен в браузере, вы не можете использовать CSS, чтобы установить display: none; в этом элементе, чтобы скрыть его, а затем использовать js, например, для его постепенного появления.

Недавно я заметил, что этого больше не происходит в Opera. Итак, я хотел бы знать, происходит ли это все еще в некоторых браузерах, если я пропустил это ... И предполагая, что это произойдет. Каким способом будет самый безопасный способ сделать это? (Конечно, игнорируя метод css в этом случае.)

js .hide()

js .addClass('hide') css .hide { display: none; }

Или что-то другое?

Редактировать:

js element.style.display = "none"

js $(element).css({display:"none"})

Edit2: эта проблема могла быть на самом деле в Safari. Я также подумал, что более новые версии jquery могли решить эту проблему. Я думаю, что на веб-сайте jquery было несколько отчетов об ошибках, но я не смог найти эти отчеты об ошибках. Или все еще может быть, что более новая версия браузера исправила это. .. Точно сказать не могу.

Редактировать3:

Итак, я действительно нашел намного больше об этом, когда начал искать эту ошибку в Safari, а не в Opera. Хотя я не могу точно сказать, что этого никогда не было и в опере...

Казалось бы, этой проблемы больше не существует и что использовать .hide() безопасно, но я узнал, что этот $(element).css({display:"none"}) действительно решил проблему, когда проблема все еще существовала.


javascript hide jquery element
person Joonas    schedule 21.08.2011    source источник
comment
element.style.display = "none" или $(element).css({display:"none"}) тоже варианты.   -  person Joseph Marikle    schedule 22.08.2011
comment
Эта статья также может быть полезна для вас, чтобы решить, что быстрее, но не что я на самом деле понятия не имею   -  person Joseph Marikle    schedule 22.08.2011
comment
прочитайте этот вопрос SO: stackoverflow.com/questions/5700865/   -  person Baz1nga    schedule 22.08.2011
comment
Вы хотите убрать его из потока, когда скроете, или просто сделаете его невидимым? Я предпочитаю visibility: hidden во время загрузки, потому что элемент остается в потоке содержимого и больше ничего не перемещается.   -  person Sparky    schedule 22.08.2011
comment
На самом деле это не имеет значения @ Sparky672 Я имею в виду ... это не влияет на мигание или время загрузки ... Я так думаю. В любом случае, если это display: none, вы всегда можете сделать его похожим на visibility: hidden, если это так важно.   -  person Joonas    schedule 22.08.2011
comment
@Lollero: Нет разницы во времени загрузки, но, может быть, мигает. В конце концов, с visibility:hidden объект уже находится в потоке контента, и его нужно только открыть, однако с display:none все содержимое должно перемещаться, чтобы освободить место, когда вы скрываете/открываете объект... безусловно, это способствует мигающий эффект. И в чем преимущество усилий по созданию display:none, чтобы он выглядел как visibility:hidden, когда вы можете просто использовать тот, который вам нужен?   -  person Sparky    schedule 22.08.2011
comment
@Sparky672 Sparky672 Проблема заключалась в том, что контент, который был скрыт с помощью .hide(), действительно загружался на страницу как любой четко видимый элемент, прежде чем он смог фактически скрыть этот элемент. По крайней мере, с моей точки зрения, это была проблема загрузки или обновления. Для меня это не имеет никакого отношения к тому, как скрытие и/или отображение повлияют на элементы вокруг него. Моя точка зрения о том, чтобы заставить элемент display: none; вести себя как элемент visibility: hidden;, заключалась в том, что если... скажем, .hide() - лучший способ сделать это, то пусть будет так... поскольку вы не можете контролировать, как скрывает .hide().   -  person Joonas    schedule 22.08.2011
comment
@Lollero: я на самом деле не одобряю здесь, поэтому я не опубликовал ответ. Просто указав, что есть и другие способы сделать это, каждый со своими плюсами и минусами.   -  person Sparky    schedule 22.08.2011
comment
Я обнаружил, что у вас больше шансов увидеть мигающий элемент, прежде чем он будет скрыт, если он находится в блоке domready. Выведение его из domready и в поток до domready вполне может сработать, хотя я не знаю, является ли это лучшей практикой или нет.   -  person Kzqai    schedule 27.01.2012

Ответы (3)


arrow_upward
5
arrow_downward

Вы всегда должны полагаться на использование метода jQuery hide(), чтобы скрыть любой элемент, потому что он заботится обо всех браузерах. Однако я не видел никаких проблем в Opera.

Даже для отображения любого элемента вы всегда должны полагаться на использование метода show() по той же причине.

Например. Чтобы показать элемент tr, если мы скажем tr.css("display", "block"), это не будет работать в Firefox, потому что это строка таблицы, и ее нужно указать как .css("display", "table-row"). Но если вы используете tr.show(), вам не нужно беспокоиться ни о каком браузере.

person ShankarSangoli    schedule 21.08.2011
comment
Ну, не совсем так, потому что вы можете просто сделать .css('display','none');, чтобы скрыть, и .css('display', '');, чтобы показать. - person Alxandr; 22.08.2011
comment
@Alxandr, который может работать в этой ситуации, но установка .css('foo','') не совсем безопасна во всех браузерах. На самом деле я подал заявку на Prototype пару лет назад, потому что в IE установка opacity на '' по умолчанию равна 0. В некоторых браузерах установка пустого значения отличается от того, чтобы никогда не устанавливать его. (Примечание. Я перестал использовать прототип, когда указанный тикет был закрыт как ожидаемое поведение, потому что Prototype установил непрозрачность на '', которая по умолчанию равна 0 в IE, когда вы передавали 1 в функцию). - person Endophage; 22.08.2011

arrow_upward
0
arrow_downward

Вы можете использовать noscript, чтобы предоставить альтернативный элемент, который всегда отображается, в то время как элемент JS сначала скрыт.

Или вы можете начать с класса без правил CSS, а затем получить сценарий для изменения правила класса CSS, чтобы убедиться, что элемент начинается скрытым.

<html>
    <head>
        <style type="text/css">
            p.start-hidden-if-js-enabled {              
            }
        </style>
        <script type="text/javascript">
            document.styleSheets[0].cssRules[0].style.display = "none";
        </script>
    </head>
    <body>
        <p class="start-hidden-if-js-enabled">
            This text will be hidden if javascript is enabled.
        </p>
    </body>
</html>
person Dunes    schedule 21.08.2011

arrow_upward
0
arrow_downward

Просто добавьте display:none в таблицу стилей или поместите встроенный style="display:none" в элемент.

person Nerudo    schedule 15.11.2011
comment
Я упомянул об этом в своем вопросе. Вопрос в том, чтобы показать элемент, если javascript отключен, и это не совсем подходит. - person Joonas; 15.11.2011