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

Question

Есть ли альтернатива fadeOut (), которая не использует display: нет для стиля? Я бы хотел использовать скрытую видимость, чтобы избежать каких-либо сдвигов в макете страницы?

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

Если вы хотите 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

});

Answer 4

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

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

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

Answer 5

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

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

Answer 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)

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