Animierte Login Form

jan25ish · 07/17/2014, 19:23

Hallo liebe User,
ich habe mir eine Login Seite erstellt, die ich mit den Just-add-water CSS animations (

) animieren möchte. Den FadeIn habe ich schon eingebunden und es war kein Problem. Ich möchte jetzt aber gerne noch die Login Maske "ausfaden" lassen, wenn man den Login Button drückt. Nur ich habe keine Idee, wie ich das Anstellen könnte. Ist das mit einem OnClick event beim Button möglich?
Meine

.
Ich füge einen Teile des Sourcecodes bei:

PHP Code:


			
<?php
// *** Validate request to login to this site.
if (!isset($_SESSION)) {
  session_start();
}

$loginFormAction = $_SERVER['PHP_SELF'];
if (isset($_GET['accesscheck'])) {
  $_SESSION['PrevUrl'] = $_GET['accesscheck'];
}

if (isset($_POST['E-Mail'])) {
  $loginUsername=$_POST['E-Mail'];
  $password=$_POST['Kennwort'];
  $MM_fldUserAuthorization = "";
  $MM_redirectLoginSuccess = "Index.php";
  $MM_redirectLoginFailed = "Login.php";
  $MM_redirecttoReferrer = false;
  mysql_select_db($database_Login, $Login);
  
  $LoginRS__query=sprintf("SELECT mail, passwort FROM Users WHERE mail=%s AND passwort=%s",
    GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text")); 
   
  $LoginRS = mysql_query($LoginRS__query, $Login) or die(mysql_error());
  $loginFoundUser = mysql_num_rows($LoginRS);
  if ($loginFoundUser) {
     $loginStrGroup = "";
    
    if (PHP_VERSION >= 5.1) {session_regenerate_id(true);} else {session_regenerate_id();}
    //declare two session variables and assign them
    $_SESSION['MM_Username'] = $loginUsername;
    $_SESSION['MM_UserGroup'] = $loginStrGroup;          

    if (isset($_SESSION['PrevUrl']) && false) {
      $MM_redirectLoginSuccess = $_SESSION['PrevUrl'];    
    }
    header("Location: " . $MM_redirectLoginSuccess );
  }
  else {
    header("Location: ". $MM_redirectLoginFailed );
  }
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Stylesheet/Style.css" rel="stylesheet" type="text/css" media="screen" />
<title>Login</title>
</head>

<body>
<div id="maske" class="animated fadeInDown">
<div id="form">
<form ACTION="<?php echo $loginFormAction; ?>"  method="POST" name="Form1">
<table width="230px" border="0">
  <tr>
    <td><img src="Bilder/mysql_Logo_weiss.png" width="150" height="78"/></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>E-Mail Adresse:</td>
  </tr>
  <tr>
    <td><span id="sprytextfield1">
      <input type="text" name="E-Mail" id="E-Mail" />
      </span></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Kennwort:</td>
  </tr>
  <tr>
    <td><span id="sprypassword1">
      <input type="password" name="Kennwort" id="Kennwort" />
      </span></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input class="button" type="submit" name="Senden" id="Senden" value="Login" style="width:90px;" />
    </td>
  </tr>
</table>
</form>

</div>
</div>

</body>
</html>

~ JWonderpig ~ · 07/17/2014, 20:00

jQuery

jan25ish · 07/18/2014, 11:42

Danke Caiv,
ich habe es jetzt so gelöst:

HTML Code:

<script type="text/javascript">
$("#Senden").click(function() {
	$("#maske").addClass("animated fadeOutDown");		
});
</script>

OfficialiSEVEN · 07/18/2014, 11:44

Ich würde dir hierbei aber auch empfehlen mit AJAX zu arbeiten