css()和opacity ..跟随fadeIn()不起作用

Question

当我在css()中将不透明度设置为0时,以下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);

Answer 1

尝试使用 fadeTo()

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

Answer 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 && height === 0) || (!jQuery.support.reliableHiddenOffsets && (elem.style.display || jQuery.css(elem, "display")) === "none" || (elem.style.opacity || jQuery.css(elem, 'opacity')) === "0");
};

.is(':hidden')现在运行将检查不透明度.见jsFiddle.

我已经提交了一份错误报告来解决这个问题.