Выцветание элементов внутри и снаружи без изменения макета страницы

Question

Нормальное поведение при использовании fadeIn и fadeOut заключается в использовании свойства display . Однако это меняет макет страницы.

Как я могу заставить fadeIn и fadeOut не изменять макет страницы?

Answer 1

Также

вместо .fadeIn() вы можете .animate({opacity:1})
и вместо .fadeOut() вы можете .animate({opacity:0})

Answer 2

Вы можете попробовать это для fadeOut:

$("something here").fadeOut("slow", function() {
    $(this).show().css({visibility: "hidden"});
});

... и это для fadeIn:

$("something here").hide().css({visibility: "visible"}).fadeIn("slow");

Answer 3

Использование fadeTo :

Метод .fadeTo() анимирует непрозрачность сопоставляемых элементов. Он похож на метод .fadeIn(), но этот метод скрывает элемент и всегда затухает до 100% непрозрачности.

Продолжительность дана в миллисекундах; более высокие значения указывают на более медленную анимацию, а не более быструю. Строки 'fast' и 'slow' могут указываться для указания длительности 200 и 600 миллисекунд соответственно. Если указана любая другая строка, используется длительность по умолчанию 400 миллисекунд. В отличие от других методов эффектов, .fadeTo() требует явного указания duration.

Если указан, обратный вызов запускается после завершения анимации ...

Answer 4

Благодаря 10gler моему решению ниже, использованию видимости для предотвращения невидимого нажатия кнопки и т. Д.

//fadeIn
$("#x")
    .css('visibility', 'visible')
    .fadeTo('fast', 1);

//fadeOut
$("#x")
    .fadeTo('fast', 0, function() {
        $(this).css('visibility', 'hidden');
    });

Answer 5

Используя комбинацию вышеупомянутых ответов, это работало хорошо для меня. Вы можете изменить время анимации по своему вкусу.

К fadeIn:

        $('selector').animate({opacity:1, visibility:'visible'}, 200);

К fadeOut:

        $('selector').animate({opacity:0, visibility:'hidden'}, 200);

Обязательно установите visibilty:'hidden' и opacity:0 в начале, чтобы избежать внезапного появления первого исчезновения, если отображение по умолчанию скрыто, иначе это не должно иметь значения.

        $('selector').css({opacity:0, visibility:'hidden'});