Question

我正在处理jquery淡入淡出功能，我认为fadeOut（）会添加＆＃34; display：none＆＃34;样式和fadeIn（）添加了一些显示属性..有时它＆＃34;显示：table＆＃34;有时它显示：list-item＆＃34;。

我的问题是......

jquery如何决定在淡入时它将显示样式转换为什么？这看起来有点随意。

没有办法简单地删除＆＃34; display：none＆＃34;风格，并在淡出之前保持原样？

Answer 1

您可以使用jquery＆＃39; s "display:none"功能在不使用.animate()的情况下淡入淡出元素。

如果您希望最初隐藏元素，请使用

.element {
    opacity: 0;
}

然后，当您要淡入时，请使用

$('.element').animate({opacity: 1});

当你想淡出时，请使用

$('.element').animate({opacity: 0});

查看.animate() here上的文档。

这是一个简单的jsfiddle，展示了我上面所描述的内容：http://jsfiddle.net/ea23wwqm/

Answer 2

回答这个问题的最好方法是查看jQuery源代码。我挖了一遍，发现fadeIn和fadeOut致电animate。在某些时候，有一些调用来显示/隐藏项目，你可以在这里找到完成的方法：

src/css/showHide.js#L19-L23：

    if ( show ) {
        if ( display === "none" ) {
            // Restore a pre-hide() value if we have one
            values[ index ] = dataPriv.get( elem, "display" ) || "";
        }

然后实际调用显示它：

src/css/showHide.js#L36-L40：

for ( index = 0; index < length; index++ ) {
    if ( values[ index ] != null ) {
        elements[ index ].style.display = values[ index ];
    }
}

基于此，我们知道答案是jQuery将element.style.display设置为""，如果它还没有预先存在的值（如果之前已隐藏，它保存了预隐藏显示值）。所以它回到了浏览器！

Jquery FadeOut和FadeIn - 设置显示样式

2 个答案: