Question

so I have the following data, but the div does not become visible.

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 running when i click a button:

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

Am I doing something wrong ?

Answer 1

jQuery fadeIn requires display:none; instead of visibility:hidden;

If you need visibility hidden then make it visible first via the CSS function:

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

Otherwise, just remove your visibility:hidden and swap it with display:none;