Wie kann ein Element ausgeblendet werden und ein anderes Element an seiner Stelle bei Fensterladen eingeblendet werden?

Question

Ich versuche, einen Begrüßungsbildschirm für meine Website zu erstellen, und ich habe einen Fortschrittsbalken gemacht, um es besser aussehen zu lassen. Ich habe auch einige Links für den Benutzer zum Anmelden oder Registrieren.

Was ich erreichen will, ist, direkt nach dem Laden des Fensters, haben die Fortschrittsbalken ihre Sache für 4 Sekunden, dann haben sie in .5 Sekunden ausgeblendet und dann haben die Links an Stelle in .5s für insgesamt 5 Sekunden, bevor der Benutzer fortfahren kann.

Ich habe einige Codes zusammen in erster Linie mit dieser Arbeit zu machen:

setTimeout(); 

aber trotz soweit keine Fehler, wie ich und die Google Chrome-Konsole sagen kann, kein sichtbares Ergebnis erzeugt wird.

Wie kann ich meinen Code reparieren, damit er richtig funktioniert? Irgendwelche Vorschläge würden sehr geschätzt werden. Ich würde eine Lösung in einfachem JavaScript bevorzugen, aber wenn es keinen anderen Weg gibt, wäre ich auch mit einem jQuery zufrieden.

Um Ihnen zu helfen, habe ich eine Demo für Sie zusammengestellt here.

Answer 1

Kein Zweifel, zu jquery zu wechseln. FadeIn und fadeOut tun es leicht:

$(window).load(function(){ 
 

 
    var t=setTimeout(function(){ 
 
    $("#progressbar").fadeOut(500); 
 
    $("#splashscreen-links").fadeIn(500); 
 
    },4000) 
 
    
 
})

@-webkit-keyframes greenglow { 
 
    from { 
 
     left:-120px; 
 
    } 
 
    to { 
 
     left:100%; 
 
    } 
 
} 
 

 
@-moz-keyframes greenglow { 
 
    from { 
 
     left: -120px; 
 
    } 
 
    to { 
 
     left: 100%; 
 
    } 
 
} 
 

 
@-ms-keyframes greenglow { 
 
    from { 
 
     left: -120px; 
 
    } 
 
    to { 
 
     left: 100%; 
 
    } 
 
} 
 

 
@-o-keyframes greenglow { 
 
    from { 
 
     left: -120px; 
 
    } 
 
    to { 
 
     left: 100%; 
 
    } 
 
} 
 

 
@keyframes greenglow { 
 
    from { 
 
     left: -120px; 
 
    } 
 
    to { 
 
     left: 100%; 
 
    } 
 
} 
 

 
#progressbar { 
 
    /* Dimensions */ 
 
    width: 250px; 
 
    height: 16px; 
 
    overflow: hidden; 
 
    
 
    /* Positioning */ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    margin: 5px; 
 
    padding-top: 4px; 
 
    padding-left: 17px; 
 
    
 
    /* Styling */ 
 
    background: #E6E6E6; 
 
    border:1px solid #bbb; 
 
    border-radius:0px; 
 
} 
 

 
#progressbar:after { 
 
    content: " "; 
 
    display: block; 
 
    width: 120px; 
 
    top: -50%; 
 
    height: 250%; 
 
    position: absolute; 
 
    animation: greenglow 2s linear infinite; 
 
    -webkit-animation: greenglow 2s linear infinite; 
 
    z-index: 2; 
 
    background: #1CAE30; 
 
} 
 

 
#splashscreen-links { 
 
    /* Text */ 
 
    color: #999999; 
 
    font-family: "Arial"; 
 
    text-decoration: none; 
 
    
 
    /* Positioning */ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    margin: 5px; 
 
    padding-top: 4px; 
 
    padding-left: 17px; 
 
    
 
    /* Visibility */ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="progressbar"></div> 
 
<p id = "splashscreen-links"><a>Login</a>&nbsp;&bull;&nbsp;<a>Register</a></p>

Answer 2

Sie sind bereits CSS-Animationen verwenden. Geh einfach weiter diesen Weg!

@keyframes progresshide { 
    0% {opacity: 1; display:block; } 
    80% { opacity: 1; } 
    100% { opacity: 0; display:none; } 
} 

@keyframes linksshow { 
    0% {opacity: 0; } 
    80% { opacity: 0; } 
    100% { opacity: 1; } 
} 

#progressbar { 
    animation: progresshide 5s linear forwards; 
} 
#splashscreen-links { 
    animation: linksshow 5s linear forwards; 
} 

https://jsfiddle.net/bcwtz8rr/3/

Answer 3

Im Fall, dass Sie lieber JS als JQuery gehen würde, es ist möglich noch .className über die Klasse zu wechseln, die Einrichtung von Klassen mit Übergängen von der .5s Sie erwähnt haben, und mit setTimeout entsprechend.

Zuerst beginnen wir durch zwei weitere recht einfache Klassen Einführung:

 .showObject { 
     transition: all .5s ease-in-out; 
     -o-transition: all .5s ease-in-out; 
     -ms-transition: all .5s ease-in-out; 
     -moz-transition: all .5s ease-in-out; 
     -webkit-transition: all .5s ease-in-out; 
     opacity: 1; 
} 
.hideObject { 
    transition: all .5s ease-in-out; 
     -o-transition: all .5s ease-in-out; 
     -ms-transition: all .5s ease-in-out; 
     -moz-transition: all .5s ease-in-out; 
     -webkit-transition: all .5s ease-in-out; 
     opacity: 0; 
} 

Dann JS mit entsprechenden setTimeout Nutzung:

window.onload = function SwitchProgress() { 

// Declaration 
'use strict'; 

// Fade in 
document.getElementById('progressbar').setAttribute('style', 'display: block;'); 
document.getElementById('progressbar').className = 'showObject'; 

// Waiting 4s for bar animation, then fading it out 
setTimeout(function() { 
    document.getElementById('progressbar').className = 'HideObject'; 

    // .5s while the bar fades out, removing bar, displaying links 
    setTimeout(function() { 
     document.getElementById('progressbar').setAttribute('style', 'display: none;'); 
     document.getElementById('splashscreen-links').setAttribute('style', 'display: block;'); 
      // .01s for display change, links fade in 
      setTimeout(function() { 
       document.getElementById('splashscreen-links').className = 'showObject'; 
      }, 10); 
    }, 990); 
}, 4000); 

};

Ich wollte nur zur Kenntnis nehmen: Ich habe dies auf Codecademy (Codebits) arbeiten, die die Datei jedes Mal aktualisiert, wenn Sie eine Änderung vornehmen. JSFiddle hat nicht so gut funktioniert. Sollte für die Verwendung auf einer Seite in Ordnung sein, die tatsächlich ordnungsgemäße onload Ausführung erleben wird.