Hoe kan ik met JavaScript met .animate zorgen dat de inhoud van een div verdwijnt en dan langzaam de nieuwe div te voor schijn komt? Ik heb al de volgende code:
$( document ).ready(function() {
showLogin();
});
function showLogin()
{
document.getElementById("register").style.display = "none";
document.getElementById("forget").style.display = "none";
document.getElementById("login").style.display = "block";
}
function showRegister()
{
document.getElementById("login").style.display = "none";
document.getElementById("forget").style.display = "none";
document.getElementById("register").style.display = "block";
}
function showPassForget()
{
document.getElementById("login").style.display = "none";
document.getElementById("register").style.display = "none";
document.getElementById("forget").style.display = "block";
}
en dit zijn de forms
<section id="login" class="container">
<section class="form">
<section>
<p style="margin-bottom: -7px; margin-top: -15px; color: black; font-size: 18pt; font-weight: bold;">Inloggen</p>
</section>
<div class="panel panel-default">
<div class="panel-body">
<form method="post" id="disable" action="" role="login">
<div class="form-group">
<p style="text-align: center;">Inloggen, geen account? <a class="disable" style="cursor: pointer;" onclick="showRegister()">Maak er één!</a></p>
<p style="text-align: center; color: red;"><?php if(isset($_POST['inloggen'])){ echo $loginerror; }?></p>
<p style="text-align: center; color: green;"><?php if(isset($_POST['inloggen'])){ echo $loginsucces; }?></p>
<label>Gebruikersnaam</label>
<input autofocus title="Maximaal 50 tekens." type="text" name="gebruikersnaam" maxlength="50" autocomplete="off" required class="form-control" />
</div>
<div class="form-group">
<label>Wachtwoord</label>
<input title="Maximaal 100 tekens." type="password" name="wachtwoord" maxlength="100" autocomplete="off" required class="form-control" />
</div>
<input type="checkbox" name="onthoud" value="1" /> Onthoud mijn gegevens.
<button type="submit" name="inloggen" class="btn btn-primary btn-block">Inloggen</button>
</form>
</div>
<div class="panel-footer">
<a onclick="showPassForget()" style="cursor: pointer;">Wachtwoord vergeten?</a>
</div>
</div>
<section>
<a href="<?php $_SERVER["REQUEST_URI"]; ?>">Copyright © <?php echo date("Y"); echo ' <b>'; echo $settings['bedrijfsnaam']; echo '</b>'; ?></a>
</section>
</section>
</section>
<section id="register" class="container">
<section class="form">
<section>
<p style="margin-bottom: -7px; margin-top: -15px; color: black; font-size: 18pt; font-weight: bold;">Registreren</p>
</section>
<div class="panel panel-default">
<div class="panel-body">
<form method="post" id="disable" action="#" role="login">
<div class="form-group">
<p style="text-align: center;">Al een account? <a class="disable" onclick="showLogin()" style="cursor: pointer;">Ga dan terug!</a></p>
<p style="text-align: center; color: red;"><?php if(isset($_POST['registreren'])){ echo $regerror; }?></p>
<p style="text-align: center; color: green;"><?php if(isset($_POST['registreren'])){ echo $regsucces; }?></p>
<label>Gebruikersnaam</label>
<input autofocus title="Maximaal 50 tekens." type="text" name="gebruikersnaam" maxlength="50" autocomplete="off" required class="form-control" />
</div>
<div class="form-group">
<label>Wachtwoord</label>
<input title="Maximaal 100 tekens." type="password" name="wachtwoord" maxlength="100" autocomplete="off" required class="form-control" />
</div>
<div class="form-group">
<label>Wachtwoord herhalen</label>
<input title="Maximaal 100 tekens." type="password" name="wachtwoordher" maxlength="100" autocomplete="off" required class="form-control" />
</div>
<div class="form-group">
<label>Emailadres</label>
<input title="Maximaal 100 tekens." type="password" name="emailadres" maxlength="100" autocomplete="off" required class="form-control" />
</div>
<button type="submit" name="registreren" class="btn btn-primary btn-block">Registreren</button>
</form>
</div>
<div class="panel-footer">
<a onclick="showLogin()" style="cursor: pointer;">Ga terug naar de inlog-pagina!</a>
</div>
</div>
<section>
<a href="<?php $_SERVER["REQUEST_URI"]; ?>">Copyright © <?php echo date("Y"); echo ' <b>'; echo $settings['bedrijfsnaam']; echo '</b>'; ?></a>
</section>
</section>
</section>
<section id="forget" class="container">
<section class="form">
<section>
<p style="margin-bottom: -7px; margin-top: -15px; color: black; font-size: 18pt; font-weight: bold;">Wachtwoord vergeten</p>
</section>
<div class="panel panel-default">
<div class="panel-body">
<form method="post" id="disable" action="" role="login">
<div class="form-group">
<p style="text-align: center;">Heeft u perongeluk geklikt? Klik dan <a onclick="showLogin()" style="cursor: pointer;">hier</a>.</p>
<p style="text-align: center; color: red;"><?php if(isset($_POST['aanpassen'])){ echo $passerror; }?></p>
<p style="text-align: center; color: green;"><?php if(isset($_POST['aanpassen'])){ echo $passsucces; }?></p>
<label>Gebruikersnaam</label>
<input autofocus title="Maximaal 50 tekens." type="text" name="gebruikersnaam" maxlength="50" autocomplete="off" required class="form-control" />
</div>
<div class="form-group">
<label>Nieuw wachtwoord</label>
<input title="Maximaal 100 tekens." type="password" name="nieuwwachtwoord" maxlength="100" autocomplete="off" required class="form-control" />
</div>
<div class="form-group">
<label>Nieuw wachtwoord herhalen</label>
<input title="Maximaal 100 tekens." type="password" name="nieuwwachtwoordher" maxlength="100" autocomplete="off" required class="form-control" />
</div>
<div class="form-group">
<label>Emailadres</label>
<input title="Maximaal 100 tekens." type="password" name="passemailadres" maxlength="100" autocomplete="off" required class="form-control" />
</div>
<button type="submit" name="aanpassen" class="btn btn-primary btn-block">Aanpassen</button>
</form>
</div>
<div class="panel-footer">
<a onclick="showLogin()" style="cursor: pointer;">Ga terug naar de inlog-pagina!</a>
</div>
</div>
<section>
<a href="<?php $_SERVER["REQUEST_URI"]; ?>">Copyright © <?php echo date("Y"); echo ' <b>'; echo $settings['bedrijfsnaam']; echo '</b>'; ?></a>
</section>
</section>
</section>
alvast bedankt!
