JQuery fadeOut без отображения нет?

Ответ 1

Вы можете напрямую использовать .animate() на opacity:

$(".selector").animate({ opacity: 0 })

Таким образом, элемент по-прежнему занимает пространство, как вы хотите, оно просто имеет непрозрачность 0, поэтому оно эффективно так же, как и visibility: hidden, когда оно заканчивается.

Ответ 2

Да, есть альтернатива. Он называется .fadeTo(), где вы устанавливаете целевую непрозрачность, которая в вашем случае будет 0.

$('element').fadeTo( 1000, 0 ); // fade to "0" with a 1000ms duration

Это не изменит свойство display в конце.

Ответ 3

Пользовательская анимация является альтернативой http://api.jquery.com/animate/

.animate({opacity: 0.0}, 5000, 'linear', callback);

Ответ 4

Один из способов сделать это - захватить режим отображения, затем .fadeOut и в полном объеме сделать свой предпочтительный метод скрытия и установить отображение на то, что было:

var $element = $('#selector');

var display = $element.css('display');
$element.fadeOut(500, function() {
   $element.css('visibility', 'hidden'); 
   $element.css('display', display);
}

Ответ 5

Я хочу fadeOut, затем снова измените содержимое, а затем fadeIn:

$("#layer").animate({opacity: 0}, 1000, 'linear', function(){

    //Do here any changes to the content (text, colors, etc.)
    $("#layer").css('background-color','red'); //For example

    $("#layer").animate({opacity: 1}); //FadeIn again

});

Ответ 6

Обратите внимание, что

fadeTo(500, 0)   // fade out over half a second
fadeTo(0, 0)     // instantly hide

(странно) несовместим с

fadeIn()

(если вы хотите снова показать его). Поэтому, если вы используете

fadeTo(500, 0)

чтобы скрыть что-то без css display: none, тогда вы должны использовать

fadeTo(500, 1)

чтобы вернуть его обратно или останется opacity: 0 в css и останется невидимым.