Как скрыть элемент с помощью css?

Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline elements for horizontal menus:

li {  display: inline;}

Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with is not allowed
to have other block elements inside it.

The following example displays <span> elements as block elements:

span {  display: block;}

The following example displays <a> elements as block elements:

CSS по стандартам

• !important
• @charset
• @font-face
• @import
• @keyframes
• @media
• CSS свойства
  • по алфавиту
  • по категориям
  • все
  • CSS1
  • CSS2
  • CSS3
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • appearance
  • azimuth
  • backface-visibility
  • background
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • break-after
  • break-before
  • break-inside
  • caption-side
  • clear
  • clip
  • color
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cue
  • cue-after
  • cue-before
  • cursor
  • direction
  • display
  • elevation
  • empty-cells
  • float
  • font
  • font-family
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marquee-direction
  • marquee-play-count
  • marquee-speed
  • marquee-style
  • max-height
  • max-width
  • min-height
  • min-width
  • nav-down
  • nav-index
  • nav-left
  • nav-right
  • nav-up
  • opacity
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • pause
  • pause-after
  • pause-before
  • pitch
  • pitch-range
  • play-during
  • position
  • quotes
  • resize
  • richness
  • right
  • speak
  • speak-header
  • speak-numeral
  • speak-punctuation
  • speech-rate
  • src
  • stress
  • table-layout
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • unicode-range
  • vertical-align
  • visibility
  • voice-family
  • volume
  • white-space
  • widows
  • width
  • word-spacing
  • word-wrap
  • z-index
• Комментарии в CSS
• Псевдоклассы
  • :active
  • :checked
  • :default
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :hover
  • :in-range
  • :invalid
  • :lang
  • :last-child
  • :last-of-type
  • :link
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-last-of-type
  • :nth-of-type
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :root
  • :target
  • :valid
  • :visited
• Псевдоэлементы
  • :after
  • :before
  • :first-letter
  • :first-line

Тестовые сценарии

Измените размер вашего браузера или загрузки на различные устройствах для проверки реагирования служебных классов.

Зеленые галочки указывают, что элемент видимый в вашем текущем экране.

Отображается на дополнительной небольшой
Очень маленькие

Видно на маленьких или узких
Маленький или узкий

Отображается на средний или узкий
Средний или узкий

Видимый на большие или узкие
Большие или узкие

Видно на маленьких или шире
Небольшой или шире

Отображается на средних или широких
Средний или шире

Видимый на большие или шире
Большие или широкие

Видны на очень большой
Очень большая

Ваши просмотра именно сверхмалые
Вашего просмотра точно не очень маленькая

Ваши просмотра именно небольшой
Вашего просмотра точно не маленький

Ваши просмотра именно средний
Вашего просмотра точно не средний

Ваши просмотра именно большие
Вашего просмотра точно не большие

Ваши просмотра точно очень большая
Вашего просмотра точно не очень большой

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора :visible.</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	   $("button").click(function(){ // запускаем функцию при клике
	     $("div:visible").css({ // выбираем все div, которые занимают место в документе и стилизуем их 
		"border": "1px solid #000", // добавляем границу со всех сторон
		"visibility": "visible", // устанавливаем у всех элементов видимость по умолчанию
		"opacity": "1" // устанавливаем прозрачность у всех элементов равной 1
	     }); 
           });
	          });
		</script>
	</head>
	<body>
	<button>Клик</button>
		<div style = "width:50px;height:50px; margin:5px; background:plum; opacity:0"></div>
		<div style = "width:50px;height:50px; margin:5px; background:plum; display:none"></div>
		<div style = "width:50px;height:50px; margin:5px; background:plum"></div>
		<div style = "width:50px;height:50px; margin:5px; background:plum; display:none"></div>
		<div style = "width:50px;height:50px; margin:5px; background:plum; visibility:hidden></div>
	</body>
</html>

В этом примере при нажатии на кнопку мы запускаем функцию, которая с использованием селектора :visible выбирает все видимые (занимают место в документе) элементы <div> и стилизует их.

Результат нашего примера:

Пример использования jQuery селектора :visible.jQuery селекторы

Краткая информация

CSS (ЦСС)	CSS (ЦСС)2
Значение по умолчанию	inline
Наследуется	Нет
Применяется	Ко всем элементам
Аналог ШТМЛ	Нет
Ссылка на спецификацию

Синтаксис

display: block | inline | inline-table | list-item | none
| run-in | table | table-caption | table-cell | table-column-group | table-footer-group
| table-header-group | table-row | table-row-group

Аргументы

Список возможных значений этого атрибута, понимаемый разными браузерами очень
короткий — block, inline,
list-item и none.
Все остальные допустимые аргументы поддерживаются браузерами выборочно. В табл. 1
приведены некоторые популярные браузеры и их поддержка различных свойств.

Табл. 1. Поддержка браузерами значений свойства display

Аргумент	Описание	ИЕ6	IE7	IE8	Op 8	Op 9.2	Ff 1.5	Ff 2	Ff 3
block	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.	Да	Да	Да	Да	Да	Да	Да	Да
inline	Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.	Да	Да	Да	Да	Да	Да	Да	Да
inline-block	Это значение генерирует блочный элемент, который обтекается другими элементами web-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.	Да	Да	Да	Да	Да	Нет	Нет	Да
inline-table	Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, контентом.	Нет	Нет	?	Да	Да	Нет	Нет	Да
list-item	Элемент выводится как блочный и добавляется маркер списка.	Да	Да	Да	Да	Да	Да	Да	Да
none	Временно удаляет элемент из объекта. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента.	Да	Да	Да	Да	Да	Да	Да	Да
run-in	Устанавливает элемент как блочный или встроенный в зависимости от конконтента.	Нет	Нет	Да	Да	Да	Нет	Нет	Нет
table	Определяет, что элемент является блочной таблицей подобно использованию тега <TABLE>.	Нет	Нет	?	Да	Да	Да	Да	Да
table-caption	Задает заголовок таблицы подобно применению тега <CAPTION>.	Нет	Нет	?	Да	Да	Да	Да	Да
table-cell	Указывает, что элемент представляет собой ячейку таблицы (тег <TD> или <TH>).	Нет	Нет	?	Да	Да	Да	Да	Да
table-column	Назначает элемент колонкой таблицы, словно был добавлен тег <COL>.	Нет	Нет	?	Нет	Да	Да	Да	Да
table-column-group	Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <COLGROUP>.	Нет	Нет	?	Нет	Да	Да	Да	Да
table-footer-group	Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <TFOOT>.	Нет	Нет	?	Да	Да	Да	Да	Да
table-header-group	Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <THEAD>.	Нет	Нет	?	Да	Да	Да	Да	Да
table-row	Элемент отображается как строка таблицы (тег <TR>).	Нет	Нет	?	Да	Да	Да	Да	Да
table-row-group	Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <TBODY>.	Нет	Нет	?	Да	Да	Да	Да	Да

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра display

Браузеры

Internet Эксплорер до версии 7 включительно:

• поддержка значений table-footer-group и table-header-group происходит только для тегов <THEAD> и <TFOOT>;
• для элементов <LI> понимает значение block как list-item;
• значение inline-block применяется только для встроенных элементов.

Опера 9.2 и старше, а также Файер фох версии 2.0 и младше:

• значение table-column применяется только для тега <COL>;
• значение table-column-group поддерживается только для тега <COLGROUP>.

CSS VİSİBİLİTY VE DİSPLAY ÖZELLİKLERİN SEO’YA ETKİSİ (GİZLİ METİN)

Css visibility ve display özelliğini JavaScript yardımıyla Animasyon yapma, Animasyonlu menü ve Tab menüler yapma şeklinde kullanabilirsiniz.

Gizli metin ve bağlantılar : Arama motorlarına sunduğunuz bilgiler kullanıcılara sunduğunuz
bilgilerden farklı olduğundan, içeriğinizde metin veya bağlantı gizlemeniz sitenizin güvenilir
olmadığının düşünülmesine neden olabilir. Bu sizin sitenizin Google dizininden çıkarılmasına yol açabilir ve arama sonuçlarında websiteniz görünmez.
Metin (örnek: aşırı anahtar kelimeler) gizlemek için
kullanılabilecek çeşitli yöntemlerden bazıları şunlardır:

• Beyaz zemin üzerinde beyaz metin kullanma
• Metni bir resmin arkasına koyma
• Metni ekranın dışına yerleştirmek için CSS kullanma
• Yazı tipi boyutunu 0’a ayarlama
• Yalnızca küçük bir karakter ekleyerek bir bağlantıyı gizleme; örneğin, bir paragrafın ortasına tire işareti ekleme

Sitenizi gizli metin veya bağlantı içerip içermediğini tespit etmek için incelerken sitenize gelen
ziyaretçilerin kolayca göremeyeceği öğeleri arayın. Ziyaretçiler yerine yalnızca arama motorları için
hazırlanmış metin veya bağlantılar var mı?

Arama motorlarının erişemeyeceği bir öğeyi ( Javascript, resim veya Flash dosyaları gibi ) açıklamak için
metin kullanıyorsanız ekran okuyucu, mobil tarayıcı veya eklenti içermeyen tarayıcı kullanan ya da
bağlantı hızı düşük olan ziyaretçilerin de bu içeriği göremeyeceğini unutmayın.
Bu öğeler için açıklayıcı metin kullanmanız, sitenizin daha erişilebilir olmasını sağlayacaktır.
Sitenizi erişilebilir hale getirmek için yararlanabileceğiniz ipuçlarından bazıları şunlardır:

Resimler : Açıklayıcı metin sağlamak için alt özelliğini kullanın. Ayrıca, resmin çevresinde
ziyaretçilerin okuyabileceği bir başlık ve açıklayıcı metin kullanmanızı öneririz. Javascript : Javascript
içeriğinin aynısını bir noscript etiketine yerleştirin. Bu yöntemi kullanırsanız, içeriğin,
Javascript’tekinin aynısı olduğundan ve tarayıcılarında Javascript etkin olmayan ziyaretçilere de bu
içeriğin gösterildiğinden emin olmalısınız. Videolar : Video hakkında HTML biçimindeki açıklayıcı
metni ekleyin. Videonun yazıya dönüştürülmüş kopyasını da ekleyebilirsiniz. Google Gizli metin ve bağlantı kalite yönergeleri için TIKLAYINIZ.

murat ayaz 06/04/2020

div içindeki yazıyı görünmez yapmak istiyorum çünkü div ve sütunda tamamen gözüküyor sadece hover çıkınca gözüksün istiyorum formül önerinizi istiyorum yardımınızı rica ederim

yönetici 08/04/2020

Murat, şu konuya bak. En altta dislay:none bölümü

Şafak 02/11/2020

Teşekkür ederim. display: none işimi halletti meşhur forumda saatlerce bu konuya cevapta bulamadım cevapta alamadım.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Setting Scene visibility for GameObjects and their children

You control Scene visibility for individual GameObjects from the Hierarchy window.

Every GameObject has a Scene visibility icon/toggle

To toggle Scene visibility:

Click a GameObject’s visibility icon in the Hierarchy window, or press H, to toggle between hiding and showing the GameObject and its children.

Toggling visibility for an object and its children affects all child objects, from the “target” object all the way down to the bottom of the hierarchy.

Alt + Click a GameObject’s visibility icon in the Hierarchy window to toggle between hiding and showing the GameObject only.

Toggling visibility for a single object does not affect its children. They retain whatever visibility status they had previously.

Tip: You can also click the to toggle between hiding and showing items marked hidden in the Scene.

Because you can toggle visibility for a whole branch or a single GameObject, you can end up with GameObjects that are visible, but have hidden children or parents. To help you track what’s going on, the visibility icon changes to indicate each GameObject’s status.

A		The GameObject is visible, but some of its children are hidden.
B		The GameObject is hidden, but some of its children are visible.
C		The GameObject and its children are visible. This icon only appears when you hover over the GameObject.
D		The GameObject and its children are hidden.

Scene visibility changes you make in the Hierarchy window are persistent. Unity re-applies them whenever you toggle Scene visibility off and on again in the Scene view, close and re-open the Scene, and so on.

Как скрыть или показать элемент используя анимацию на jQuery

Можно применять комбинацию fadeIn() и fadeOut(), использовать slideDown() и slideUp(), или же быстрая смена по клику — slideToggle() и fadeToggle(). Соответственно коды для них:

<script>
$(function(){
  $('.mySelector').fadeIn(); //показать
  $('.mySelector').fadeIn(500); //показать за 500 миллисекунд (пол секунды)
  $('.mySelector').fadeOut(); //скрыть

  $('.mySelector').slideUp(); //показать
  $('.mySelector').slideDown(); //скрыть

  $('.mySelector').fadeToggle(); //переключатель исчезновения-появления :)
  $('.mySelector').slideToggle(); //переключатель эффекта слайда :)
});
</script>

Если вам нужна плавная анимация, можно поставить число в миллисекундах 200, 400, 1200 и т.д. , или фразы в стиле slow, fast — тут уже как удобней, подробней смотрите в документации . Ну и если анимация нам не нужна вообще, а она бывает по умолчанию уже задана 600 (если ничего не путаю), то просто ставим 0 — fadeIn(0);

Конечно это не самый лучший вариант, и я вам настоятельно рекомендую несколько раз подумать прежде чем это всё использовать — ведь все эти эффекты создавались явно не для того чтобы скрывать элементы со страницы

Property Values

Value	Description	Play it
visible	Default value. The element is visible	Play it »
hidden	The element is hidden (but still takes up space)	Play it »
collapse	Only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). This value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as «hidden»	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Примеры

В следующем примере реализуется обработчик, который ссылается на две различные именованные кнопки, которые должны быть взаимоисключающими парами в пользовательском интерфейсе.The following example implements a handler that references two different named buttons that are intended to be a mutually exclusive pair in the user interface. Перед выполнением фактической логики программы, связанной с кнопкой, сама кнопка имеет значение , а вторая кнопка в паре имеет значение .Prior to running the actual program logic associated with the button, the button itself is set to be , and the other button in the pair is set to .

Как скрыть элемент использую присвоение классов в jQuery

Один из самых «нормальных» вариантов это присваивать временные классы. Кстати говоря, такие классы лучше выделить как-то на фоне остальных, например, мне понравилась идея добавлять приставку .js- как по мне, очень удобно.

В самом начале статьи уже рассматривались варианты скрытия на CSS, самый адекватный это:

.js-hidden {
  display: none;
}

и как всегда вся магия jQuery умещается в несколько строк:

$(function(){
  $('.my-selector').click(function(){
    $(this).addClass('js-hidden');
    $(this).removeClass('js-hidden');
    $(this).toggleClass('js-hidden');
  });
});

$(this).addClass(‘js-hidden’); — добавляем класс тому объекту, по которому мы кликнули,$(this).removeClass(‘js-hidden’); — убираем класс по клику,$(this).toggleClass(‘js-hidden’); — автоматом убираем или добавляем класс, по очереди.

Обратите внимание, что если вы хотите закрыть «попап» или другой элемент на странице, вам нужно заменить $(this) на свой селектор $(‘.mySelector’), и не забывайте, одну очень важную вещь — прятать нужно не все элементы на странице, а только тот, который относится к текущей кнопке. Да, это означает что вам придется искать родителя, начиная от элемента по которому вы кликнули

Надеюсь, вы сами разберетесь какие из этих советов можно считать «вредными», а какие можно смело применять

More Examples

Difference between the display property and the visibility property:

function demoDisplay() {  document.getElementById(«myP1»).style.display = «none»;
}function demoVisibility() {  document.getElementById(«myP2»).style.visibility = «hidden»;
}

Toggle between hiding and showing an element:

function myFunction() {  var x = document.getElementById(‘myDIV’);
  if (x.style.visibility === ‘hidden’) {    x.style.visibility = ‘visible’;  } else {    x.style.visibility = ‘hidden’;
  }}

Hide and show an <img> element:

function hideElem() {  document.getElementById(«myImg»).style.visibility = «hidden»;
}function showElem() {  document.getElementById(«myImg»).style.visibility = «visible»;
}

Toggle

Чтобы элементы отображались только при наведении или фокусе, добавьте класс к родительскому элементу и один из следующих классов к любым дочерним элементам, которые должны быть скрыты.

Класс	Описание
	Элемент удаляется из потока документов (не занимая пространства), когда скрыт.
	Элемент не удаляется из потока документов (оставляет за собой место) при скрытии.

Дочерние элементы будут отображаться, когда на родительский элемент имеется наведение или фокус. Добавьте к родительскому элементу, чтобы он мог получать фокус с помощью клавиатуры и сенсорных устройств.

Если в скрытом дочернем элементе есть элементы или , они уже доступны для навигации с помощью клавиатуры и будут отображать дочерний элемент. Поэтому добавьте , чтобы родительский элемент все еще мог фокусироваться на сенсорных устройствах.

• Душа моя озарена неземной радостью, как эти чудесные утра.

  Душа моя озарена неземной радостью, как эти чудесные утра.

Visibility

Следующий способ скрыть блок или текст свойство — . Значение будет скрывать элемент. Так же, как и свойство , скрытый элемент будет влиять на макет нашей веб-страницы. Единственное отличие заключается в том, что на этот раз он не будет доступен для взаимодействия. Кроме того, он будет скрыт от чтения с экрана.

Это свойство можно анимировать до тех пор, пока начальные и конечные состояния имеют различные значения. Это гарантирует плавный переход между состояниями видимости.

.hide {
   visibility: hidden;
}

Ниже пример, можете посмотреть разницу.

Обратите внимание на то, что потомки элемента с могут быть видимыми, если их свойство. Попробуйте навести курсор только на скрытый элемент, а не на пункт внутри

Вы увидите, что тип курсора не изменится. Кроме того, если вы попытаетесь щелкнуть на элемент, ваши клики не будут учтены.

Тег внутри будет как и раньше захватывать все события мыши. Как только вы наведете курсор мыши на текст он станет видимым и начнет регистрировать события.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

More Examples

Difference between the display property and the visibility property:

function demoDisplay() {  document.getElementById(«myP1»).style.display = «none»;
}function demoVisibility() {  document.getElementById(«myP2»).style.visibility = «hidden»;
}

Toggle between hiding and showing an element:

function myFunction() {  var x = document.getElementById(‘myDIV’);
  if (x.style.visibility === ‘hidden’) {    x.style.visibility = ‘visible’;  } else {    x.style.visibility = ‘hidden’;
  }}

Hide and show an <img> element:

function hideElem() {  document.getElementById(«myImg»).style.visibility = «hidden»;
}function showElem() {  document.getElementById(«myImg»).style.visibility = «visible»;
}