Когда мы угасаем элемент в или из, какое свойство CSS меняется? Является ли это видимостью или отображением?
Я хочу написать код с условием условия if
, которое говорит (псевдо):
when the div is visible, do something
Пример:
if ( $('#div').is(':visible') ) {
do something;
}
... но я не уверен, какое свойство или атрибут в CSS изменилось.
Прозрачность.
Вы можете проверить, тоже ли это. Если вы установите длинный fadeOut (т.е.: 10 секунд), вы можете открыть консоль браузера и проверить значения по мере их изменения.
Добавьте следующий код в свой HTML-документ:
HTML
<div id="testItem"></div>
CSS
#testItem
{
display : block;
width : 100px;
height : 100px;
background: #0AF;
}
JavaScript/JQuery
jQuery(document).ready(
function(e)
{
$('#testItem').click(
function(e)
{
$(this).fadeOut(10000);
}
);
}
);
Затем откройте документ с помощью Chrome и щелкните правой кнопкой мыши элемент div, который мы только что создали. В открывшемся меню выберите "Inspect Element" (Если ваш браузер находится на другом языке, это должен быть последний вариант меню). Затем консоль Chrome должна быть открыта, и она должна быть отмечена значком.
Наконец, щелкните элемент div, и вы увидите, что происходит, когда вы fadeOut/В каком-то элементе.
fadeIn()
изменит opacity
от 0
до 1
(предполагая, что элемент скрыт от начала).
display
будет установлен на block
после завершения анимации (по умолчанию 400 мс).
fadeOut()
делает обратное.
Когда вы fadeOut()
любой элемент, его непрозрачность переключается с 1 на 0, а свойство display равно none. Противоположность происходит в fadeIn()
(для свойства display установлено значение block.)
Насколько я знаю, это изменит свойство непрозрачности, а не свойства отображения или видимости, которые будут работать в кросс-браузере, поэтому, если это изменит firefox -moz-opacity и т.д.
$.fadeIn()
и $.fadeOut()
, по сути, изменяют свойство display
CSS, либо block
либо none
изменяют его. Это было верно на jQuery 1.10;)