✔ Frage bzgl. einem jquery Funktion

[F0rris]

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.

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

<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

 

[jannicars]

http://api.jquery.com/animate

 

[Noeden]

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

 

[F0rris]

        <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>

 

[CPoly]

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

.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;
}

 

[F0rris]

$(".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.