Ich war neugierig auf, wie man das auf meiner Webseite anwenden, wenn Sie diese Website sehen können: http://www.dynamicworks.eu/ und klicken Sie auf einen Link an der Spitze, werden Sie Beachten Sie, dass eine glatte Einblendung in weißem Hintergrund angezeigt wird. Wenn jemand kann mir sagen, wie es zu tun, würde ich sehr froh sein :)Ganzer Seite Weißer Hintergrund Preloader Fade in Link klicken (Beispiel)
Below Code-Schnipsel folgen, damit es funktioniert. Bitte zögern Sie nicht Ihre Fragen zu stellen.
$('.faded-div').fadeOut(2000);
$('a.fade-in').click(function(){
$('.faded-div').fadeIn(2000);
});
$('a.fade-out').click(function(){
$('.faded-div').fadeOut(2000);
});.faded-div{
position: fixed;
z-index: 999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:blue ;
display: none;
}
.faded-div a
{
color:white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faded-div"><a href="#" class="fade-out">Click To FadeOut</a></div>
<a href="#" class="fade-in">Click To FadeIn</a>Erstellen von HTML-Overlay
<body>
<div class="overlay"></div>
.....
</body>
CSS Styling
.overlay{
position: fixed;
z-index: 999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
display: none;
}
Javascript
$('a.do-fade').click(function(){
$('.overlay').fadeIn(200);
}
Sie können tun, mehr Zeug um glatt zu sein
Entfernen Anzeige keiner von dem CSS-Stil und einige Javascript auf Fenster Last anwenden oder Dokument bereit
$(window).load(function() {
$('.overlay').fadeOut(200);
})
nichts passiert, können Sie genauer sein? Ich möchte dazu auf Links wie die Website – csandreas1
Haben Sie jquery installiert? Fügen Sie dieses in der Kopfzeile oder über Ihrem Skript hinzu –
danke für Ihre Hilfe Wie auch immer, ich fand die Lösung – csandreas1
html z.B .:
<div class="blank-div"></div> // somewhere in the <body>
<div class="some-link"> // your link
<a class="my-link" href="/your/path.html">Click me</a>
</div>
js (mit Jquery):
$(".my-link").click(function(){
$(".blank-div").fadeIn("slow", function(){
location.href="/your/path.html";
});
});
CSS:
.blank-div{
display: none;
position: fixed;
top: 0; left: 0;
height: 100%;
width: 100%;
background: #fff;
z-index: 999;
}
Sie können diesen Code auch mit einigen weiteren Animationen oder Stilen ändern
danke, genau, was ich wollte – csandreas1
jetzt muss ich es für WordPress zerif-lite Thema anwenden – csandreas1
Sie müssen nur diese CSS und Jquery hinzufügen, um Ihr Thema zu stylen und entsprechende Klassen in Ihrem Thema der Ansichtsseite wie Wir haben für diese Demo verwendet. –