jQuery: Slide Down Tutorial
Mit jQuery können wie Sie sicherlich wissen einige nette Effekte umgesetzt werden. Im folgenden Artikel erfahren Sie wie Sie Objekte wie beispielsweise einen div-Container in rot via Knopfdruck runtersliden lassen können. Dieses könnte man sich in der Praxis beispielsweise bei der Navigation vorstellen. Zu Anfang benötigen Sie das jQuery Framework inklusive einem HTMl Grundgerüst mit einem Verweis auf das jQuery Framework.
Fügen Sie jetzt folgenden Code in Ihre HTML Datei in den Head-Bereich.
<script> $(document).ready(function(){ $(document.body).click(function () { if ($("#slider").is(":hidden")) { $("#slider").slideDown("slow"); } else { $("#slider").hide(); } }); }); </script>
Wo jetzt document.body steht müssen Sie das Objekt auswählen bei der die Funktion starten soll. In diesem Fall wurde der ganze Body gewählt. Im anschließenden Teil sehen Sie dann eine Überprüfung ob der rote div-Container bereits versteckt ist oder nicht. Wenn er nicht versteckt bzw. unsichtbar ist wird er geöffnet und das mit einem Slide nach unten in einer langsamen Geschwindigkeit. Jetzt müssen sie nur noch den div-Container in Ihrer HTML Datei erstellen und eventuell einen Button hinzufügen der auf das Klickevent reagiert.
Hier nochmal der gesamte Quelltest.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>jQuery UI - Droppable</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
if ($("#slider").is(":hidden")) {
$("#slider").slideDown("slow");
} else {
$("#slider").hide();
}
});
});
</script>
<style>
#slider {
display: none;
height: 50px;
width: 130px;
background-color: red;
}
</style>
</head>
<body>
<button>Klick</button>
<div id="slider">
</div>
</body>
</html>
