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')将检查不透明度。 See jsFiddle

我已提交a bug report来解决此问题。

Answer 3

.fadein（）用于显示隐藏元素，我不知道它是否适用于不透明度设置为0.而不是不透明度：0尝试显示：无

编辑：看起来你在我的帖子经过

之前想到了这一点

css（）和opacity ..跟随fadeIn（）不起作用

3 个答案: