Hallo zusammen,

Ich bin auf der Suche nach einer Funktion (jquery) die mir dabei hilft folgende Grafik von unten nach oben zu verschieben und dies Gleichzeit macht.

http://img.ihack.se/images/10130842317116.png

So würde ich den Code aufbauen, um die einzelnen Buttons / Schaltflächen anzuzeigen.

HTML-Code:

<style media="all">
div.menu-left
{
	padding-left:10px;
	background: url(images/button.png) no-repeat top left;
	float:left;
}
div.menu-right
{
	width:10px;
	background: url(images/button.png) no-repeat top right;
	float:left;
}
div.clean
{
	clear:both;
}
</style>
<div id="button-1">
    <div class="menu-left"><a href"#">foo</a></div>
    <div class="menu-right"</div>
    <div class="clean"></div>
</div>

Ich weißt nur grade nicht nach was ich suchen soll. auf der jQuery API Seite finde ich unter Button's nicht wirklich das was ich meine.

Beste Grüße F0rris

http://api.jquery.com/animate

Und wenn es nicht animiert sein coll http://api.jquery.com/css oder für gleichzeitig addClass

HTML-Code:

        <script>
			$(".button a").mouseout(function() {
				$(this).children(".l").css("background-position", "+0px 0px");
				$(this).children(".r").css("background-position", "-396px 0px");
			});
			$(".button a").mouseenter(function() {
				$(this).children(".l").css("background-position", "+0px -25px");
				$(this).children(".r").css("background-position", "-396px -25px");
			});
        </script>

Für das was du du machst brauchst du auf keinen Fall JavaScript. Aber du hattest dich auch nicht so klar ausgedrückt.

Code css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.button .l {     background-position:0px 0px; }   .button .r {     background-position:-396px 0px; }   .button a:hover .l {     background-position:0px -25px; }   .button a:hover .r {     background-position:-396px -25px; }

Code javascript:

1 2 3 4 5 6 7 8 9

$(".button a").mouseleave(function() {     $(this).children(".l").css("background-position", "0px 0px")     $(this).css("color", "#152B38");     $(this).children(".r").css("background-position", "-393px 0px"); }).mouseenter(function() {     $(this).children(".l").css("background-position", "0px -25px");     $(this).css("color", "#F2F5F7");     $(this).children(".r").css("background-position", "-393px -25px"); });

Das es mit nur CSS geht ist mir auch bekannt - ich hab nur nicht daran gedacht ... Danke für die erinnerung. ich hab mich zumindest jetzt etwas mit jQuery gespielt.