Fixed !! i needed to use the full Core of Jquery not the slim version
I overlaped two div containers. Now at site load i wanna hide the one div and if i enter the second div(caption in this case) this caption should fade out and the first div(the main text) should be fade in. I can hide it at start but in non case it plays any fade animation.
I tried every (me known) text container inside the div like h1(for the caption), span and p. None of them work :(
#navbar-header a {
font-size: 20px;
}
#navbar-header {
padding-right: 30px;
}
body, html {
height: 100%;
}
.dropdown-item {
font-size: 15px !important;
}
.navbar {
opacity: 0.7 !important;
}
footer {
background-color: white;
opacity: 0.7 !important;
}
#welcomeHead{
position: absolute;
text-align: center;
padding-top: 300px;
font-family: 'Varela Round';
font-size: 3rem;
width: 100%;
line-height: 3rem;
letter-spacing: .8rem;
color: #000000;
}
#welcomeBody{
text-align: center;
padding-top: 200px;
font-family: 'Varela Round';
font-size: 2rem;
width: 100%;
line-height: 3rem;
color: #000000 !important;
position: absolute;
}<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
<script>$(document).ready(function () {
$("#welcomeBody").hide();
$("#welcomeHead").mouseenter(function () {
$("#welcomeHead").fadeOut();
});
});</script>
</head>
<body id="bootstrap-overrides">
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<a class="navbar-brand" href="#">
<img src="damnik_logo.png" width="100" height="100" class="d-inline-block align-top" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto" id="navbar-header">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Aufgaben
</a>
<div class="dropdown-menu" id="test" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">HTML Brief</a>
<a class="dropdown-item" href="#">Erste Website</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">Tabellen</a>
<a class="dropdown-item" href="#">JavaScript</a>
<a class="dropdown-item" href="#">Raster Layout</a>
<a class="dropdown-item" href="#">Bootstrap</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bericht</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
<div>
<span class="mx-auto my-0 text-uppercase" id="welcomeHead">Willkommen auf meiner Seite</span>
</div>
<div>
<span class="text-white-50 mx-auto mt-2 mb-5" id="welcomeBody"> Auf dieser Seite wird ihnen mein Portfolio, mit
allen
bisher erfüllten Aufgaben bereigestellt.
Diese finden sie unter dem Punkt Aufgaben.<br>
Unter Bericht steht ihnen der gesamte Werdegang dieser Seite anschaulich zur Verfügung.<br>
Infos zu meiner Person und meinem persöhnlichen Werdegang finden sie unter About.<br>
Falls es nach dies allem noch Fragen, Wünsche oder Anmerkungen gibt können sie mich unter
Kontakt jederzeit per Mail kontaktieren.<br>
Viel Spaß auf meiner Seite.</span>
</div>
<footer class="page-footer font-small cyan darken-3 fixed-bottom">
<!-- Quelle:https://mdbootstrap.com/education/bootstrap/ -->
<div class="footer-copyright text-center py-3">
<img src="damnik_logo.png" width="25" height="25" class="d-inline-block align-top" alt="logo">
© 2019 Copyright: Marvin Damnik
<a href="#">Impressum</a>
</div>
</footer>
</body>
</html>ok here on stack overflow i see that i runs me an error message that fadeOut isnt a method. But in this case more Question marks appears over my Head. It isnt a valid Method from jquery ? Jquery is in my meaning inlcuded with Bootstrap in this project o.O
Fixed. Over 12 Hours Ago i started with this project and was confused if the slim version will make problems, now i dont recognize this anymore and waste over 1 hour to fix this problem... Thanks all
