jquery fadein 不适用于所有浏览器

Posted 2023-02-21

【中文标题】jquery fadein 不适用于所有浏览器

【英文标题】：jquery fadein NOT working in all browsers

【发布时间】：2012-05-23 20:54:32

【问题描述】：

所以我有以下数据，但 div 不可见。

html:

<div id="divTest" class="cTest">
others divs, and html in here
</div>

css:

.cTest 
    position: absolute;
    top: 60px;
    left: 100px;
    right: 100px;
    bottom: 25px;
    min-height: 500px;
    min-width: 500px;
    overflow: hidden;
    background-color: #FF0000;
    border: 0px solid #000000;
    font-family: arial; 
    font-size: 10pt;
    font-weight: normal;
    margin: 0px;
    padding: 5px;
    cursor: default;
    z-index: 10;
    visibility: hidden;

    -moz-box-shadow: 0px 0px 5px 5px #777777;
    -webkit-box-shadow: 0px 0px 5px 5px #777777;
    box-shadow: 0px 0px 5px 5px #777777;

当我点击一个按钮时js运行：

$("#divTest").fadeIn(600);

我做错了吗？

【问题讨论】：

问题是visibility: hidden。可以在this question 接受的答案中找到解决方案。

谢谢，应该搜索得更好！

【参考方案1】：

jQuery fadeIn 需要 display:none;而不是可见性：隐藏；

如果您需要隐藏可见性，请先通过 CSS 函数使其可见：

$('#divTest').css('visibility','visible').hide().fadeIn(600);

否则，只需删除您的可见性：隐藏并将其替换为显示：无；

【讨论】：

好的，谢谢，解决了它，虽然我相信淡入淡出应该已经连接（使用）可见性而不是显示，因为 display: none 影响布局，而可见性不会因此保留它。