jQuery fadeOut без дисплея немає?

78

Чи існує альтернатива fadeOut (), яка не використовує display: none для стилю? Я хотів би просто використовувати видимість, приховану, щоб уникнути будь-яких змін у макеті сторінки?

jquery

— Кайл Роджерс
джерело

118

Ви можете використовувати .animate()на opacityбезпосередньо:

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

Таким чином, елемент все ще займає простір, як ви хочете, він просто має 0непрозорість, тому він фактично такий же, як і visibility: hiddenколи закінчується.

— Нік Крейвер
джерело

12

Користувач все ще може натиснути на елемент ( наприклад, посилання), хоча в цьому випадку вам може знадобитися встановити visibility: hidden;функцію зворотного виклику завершення або щось подібне.

— Будь ласка, стоять

Я хочу приховати елемент, не встановлюючи для дисплея жодного. Additinaly Я не хочу, щоб елемент утримував простір, це виглядає потворно, якщо на сторінці немає нічого, але простір все одно зарезервовано ...

— Obaid Maroof

1

@ObaidMaroof - це саме те, що відображає поведінку: none для ... Якщо ви говорите про миттєве приховування, яке ви не хочете, тоді ви переслідуєте .fadeOut (), яке відображає: none після затухання.

— Нік Кравер

69

Так, є альтернатива. Це називається.fadeTo() , де ви встановлюєте цільову непрозорість, яка у вашому випадку буде 0.

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

displayЗрештою це не змінить властивість.

— користувач113716
джерело

3

Це не додає display: none при затуханні до 0, але якщо ви переходите до значення вище 0, це змушує display: block (принаймні, коли у вас є display: none). Таким чином, це фактично змінює властивість відображення за певних обставин. Мені довелося використовувати animate (), щоб уникнути цього.

— Йенс

Але що, якщо я хочу приховати елемент, щоб він не займав простір у документі (наприклад, не відображати). І все це без налаштування дисплея на жодне.

— Obaid Maroof

Це спрацювало чудово, просто потрібно було додати як вицвітання для показу, так і затухання, щоб приховати. $ ('# msgInfo'). fadeTo (0, 500); $ ('# msgInfo'). fadeTo (2000, 0);

— Патрік

3

Спеціальна анімація - це альтернатива http://api.jquery.com/animate/

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

2

Одним із способів цього є захоплення режиму відображення, потім .fadeOut, і в повному обсязі виконайте бажаний спосіб приховування та встановіть дисплей назад на те, що він був:

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

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

— лягати
джерело

2

Я хочу 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

});

— jobima
джерело

Дякую !! це справді мені допоможе +1

— CHINE Уссама

0

Зауважте, що

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 і залишиться невидимим.

— Саймон_Ткач
джерело