1

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 ?

MirrorMirror
  • 186
  • 8
  • 36
  • 70
  • 1
    The problem is `visibility: hidden`. A solution can be found in the accepted answer to [this question](http://stackoverflow.com/questions/2435751/jquery-fade-element-does-not-show-elements-styled-visibility-hidden). – James Allardice May 16 '12 at 10:01
  • thanks, should have searched better! – MirrorMirror May 16 '12 at 10:13

1 Answers1

2

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;

digitalclubb
  • 585
  • 1
  • 5
  • 14
  • okay thanks, that solves it, though i believe that the fadeIn should have been connected ( working with ) visibility and not display, because display: none affects the layout, while visibility doesn't and thus preserves it. – MirrorMirror May 16 '12 at 10:13