2016-08-31 25 views
2

Ich habe ziemlich viele Seiteneffekte auf die Last, und sie können dazu führen, dass die Seite beim Laden entstellt wird. Um das aufzuhalten, verblasse ich den Körper rein und raus. Es funktioniert jedoch nur, wenn display:none; dem Body-Abschnitt des CSS zugeordnet ist.HTML <body> FadeIn/FadeOut mit jQuery funktioniert nur mit Anzeige: keine

CSS

body { 
    position: relative; 
    min-height: 100%; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border-collapse: collapse; 
    font-size: 12px; 
    display: none; 
} 

JS

window.onload = function() { 
    $('body').fadeIn(); 
    main(); // my effect function 
}; 

window.onbeforeunload = function() { 
    $('body').fadeOut(); 
}; 

ich in VS 2015 eine der Design-Editor bin mit und ich kann meine Seiten nicht sehen, weil display:none; eingestellt ist.

Gibt es einen Grund, warum es ohne display:none; nicht funktioniert?

+0

Um zu vermeiden, 'display: none' zu ​​verwenden, rufen Sie' $ ('body'). Hide(); 'in Ihrem JS auf, * bevor * Sie' .fadeIn() '? –

Antwort

3

animiert die Opazität von ihrem aktuellen Zustand zu 1 (d. H. Keine Transparenz).

Wenn das Element vollständig versteckt ist, wird, dass ein Übergang von 0 auf 1, wenn das Element eine Opazität von 50% hat, wird es einen Übergang von 0,5 zu 1.

sein, wenn auf der anderen Seite , das Element ist bereits sichtbar, es wird überhaupt keine Animation geben, da das Element bereits im Zielzustand ist.

+0

Das macht sehr viel Sinn. Vielen Dank :) – Astrify

Verwandte Themen