css () и непрозрачность.. после fadeIn () не работает

#jquery

#jquery

Вопрос:

когда я устанавливаю непрозрачность в 0 в css (), следующая функция fadeIn () не работает

если я установлю непрозрачность равной 1, loader элемент будет показан, но, конечно, никакого затухания не будет..

 loader.css({
        top : ($(window).height() - loader.height()) / 2 'px',
        left : ($(window).width() - loader.width()) / 2 'px',
        opacity : 0
    })
    .fadeIn(1000);
  

если я использую display: none, это работает!?

 loader.css({
        top : ($(window).height() - loader.height()) / 2 'px',
        left : ($(window).width() - loader.width()) / 2 'px',
        display : 'none'
    })
    .fadeIn(1000);
  

Комментарии:

1. С какой разметкой вы работаете? Как насчет jsFiddle?

Ответ №1:

Попробуйте использовать fadeTo()

 loader.css({
    top : ($(window).height() - loader.height()) / 2 'px',
    left : ($(window).width() - loader.width()) / 2 'px',
    opacity : 0
})
.fadeTo(1000, 1);
  

Комментарии:

1. Это решает проблему, и если OP хочет использовать fadeIn() , скройте содержимое с помощью display: none , и оно отсортируется (как отредактировано OP, он / она уже знает это).

Ответ №2:

Проблема в том, что jQuery выполняет такие функции, как fadeIn только если элемент не виден. jQuery внутренне делает $(this).is(':hidden') , чтобы решить, запускать анимацию или нет. hidden Фильтр явно не проверяет, равна ли непрозрачность 0; вероятно, так и должно быть.

Очевидное решение — установить display: none так, как у вас есть, или вызвать hide() перед вашим вызовом fadeIn() , если вы уверены, что элемент скрыт.


Другое решение — переопределить hidden фильтр для проверки непрозрачности:

 jQuery.expr.filters.hidden = function(elem) {
    var width = elem.offsetWidth,
        height = elem.offsetHeight;

    return (width === 0 amp;amp; height === 0) || (!jQuery.support.reliableHiddenOffsets amp;amp; (elem.style.display || jQuery.css(elem, "display")) === "none" || (elem.style.opacity || jQuery.css(elem, 'opacity')) === "0");
};
  

Запуск .is(':hidden') теперь будет проверять непрозрачность. Смотрите jsFiddle.


Я отправил отчет об ошибке, чтобы охватить эту проблему.

Ответ №3:

.fadein () используется для отображения скрытого элемента, я не знаю, работает ли он с непрозрачностью, установленной на 0. Вместо непрозрачности: 0 попробуйте отобразить: нет

редактировать: похоже, вы поняли это до того, как прошел мой пост