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

Ответ 1

Кроме

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

Ответ 2

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

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

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

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

Ответ 3

Используйте fadeTo:

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

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

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

Ответ 4

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

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

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

Ответ 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'});