2016-05-10 6 views
0

In meiner Webseite verwendete ich CSS, um opacity=0 und in den Textkörper zu setzen, dann verwendete JS, um opacity=1 festzulegen, wenn die Seite geladen wird. Allerdings gibt es eine <div>, die ich unsichtbar bleiben möchte, also habe ich CSS verwendet, um visibility="hidden" zu setzen. Wenn ich Opazität verwendet, würde meine <div> mit dem Rest der Seite erscheinen.Gibt es eine Möglichkeit, eine Einblendung durch verborgene Sichtbarkeit (CSS, JS) zu erzielen?

Gibt es entweder
1. Eine Art und Weise der Körper die Trübung auf 1, aber kein <div> Element im Inneren (I Anwendung Opazität Abschnitte um es in Betracht gezogen, aber ich würde die ganze Seite wie auf einmal angezeigt werden) zu setzen?
2. Eine Möglichkeit, den Text anders als die Opazität einzublenden (Ich habe versucht, die FadeIn() von jQuery, aber ich glaube nicht, es funktionierte, wenn meine Sichtbarkeit noch ausgeblendet war)?

+0

Sein in keinem Zusammenhang mit Ihrer Frage, aber Sie können hier belebte CSS-Bibliothek verwenden https : //daneden.github.io/animate.css/ – Sarz

Antwort

1

die visibility:visible für das div Nehmen:

#main{ 
 
    visibility: hidden; 
 
} 
 
#child{ 
 
    visibility: visible; 
 
}
<div id="main">main is not visible 
 
    <div id="child">child still visible</div> 
 
</div>

Gegenteil tun, wenn Ihr Kind sichtbar unsichtbar und Haupt sein wollen. (Aber ich glaube nicht, das ist das, was Sie wollen.)

#main{visibility:visible;}#child{visibility:hidden;} 

#main Sicht nicht erforderlich, wenn dies der Fall ist.

0

Das div mit der auf 0 eingestellten Deckkraft sollte immer noch unsichtbar bleiben, obwohl der Körper jetzt sichtbar ist.

zu meinem Beispiel Siehe hier: http://codepen.io/partypete25/pen/rePXag

CSS

body { 
    opacity:0; 
    background:red; 
    transition:opacity linear 2s; 
} 

div { 
    width:100px; 
    height:100px; 
    background:blue; 
    opacity:0; 
} 

JAVASCRIPT

var x = document.getElementsByTagName("BODY")[0]; 
x.style.opacity = "1"; 
Verwandte Themen