Moin,
ich möchte gern meinen Blog auf jquerry umstellen (vorher mootools). Und eigentlich sehen die Funktionen dazu auch recht simpel aus. Nur irgendwie will es nicht klappen! Ich hab mal ein Beispiel geschrieben, was klappen sollte. Er soll das "Fenster" verschwinden lassen. Wo liegt der Fehler ?
html
HTML
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/functions.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<a href="#" id="ToggleSidebar" title="ein-/ausblenden">Klick mich</a>
<div class="beispiel">
<b class="top">
<b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b>
</b>
<h1>Runde Ecken</h1>
<p>Wenig Code, viel Ergebnis</p>
<b class="bottom">
<b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b>
</b>
</div>js
Code
$("a#ToggleSidebar").click().toggle(function() {
$('div.beispiel').animate({
width: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$('div.beispiel').animate({
width: 'show',
opacity: 'show'
}, 'slow');
});css
Code
body { background: #212121; }
.beispiel { width: 800px; position: fixed; top: 70px; left: 100px; background: #323232;}
.beispiel .top, .beispiel .bottom{display:block;background: #212121;}
.beispiel .top b, .beispiel .bottom b
{
display:block;height: 1px; overflow: hidden; background: #323232;
}
.beispiel .r1{margin: 0 5px;}
.beispiel .r2{margin: 0 3px;}
.beispiel .r3{margin: 0 2px;}
.beispiel .top .r4, .beispiel .bottom .r4{margin: 0 1px;height: 2px;}