jQuery animate() - Problem mit Menu-Animation

[simusch]

Hallo

Ich kämpfe mit einem kleinen Kosmetik-Problem.

Für eine Website möchte ich ein Menu machen, bei welchem bei Mouseover ein farbiger Balken nach unten vergrössert wird und den Menutext danach überlagert.

Ich habe euch hier ein kleines Beispiel gemacht, wie es aussehen sollte:

http://www.simonschaller.ch/files/css.html
(CSS und jQuery im Quelltext ersichtlich)

Die Animation im oberen Bereich (nur CSS) funktioniert soweit.
Wenn ich das ganze mit jQuery animieren will, damit es fliessend geschieht, passiert folgendes:

- wenn man mit der Maus den ROTEN Bereich berührt, klappt die Animation
- wenn man mit der Maus den MenuTEXT berührt, flackert das ganze und die Animation gerät durcheinander, am Schluss erscheint nichtmal mehr der Text wieder schwarz.

Eventuell könnte man das ganze HTML-technisch anders lösen, als ich es gelöst habe, aber wie? Möchte auf Grafiken verzichten!

Danke für eure Inspiration!

Simu

 

[falkgottschalk]

Servus,
habe einen ähnlichen Effekt mit einer Joomla-Erweiterung mal gebaut.
Ist ja im Endeffekt auch nur css und html und Script....
Vielleicht kannst Du hier was abkupfern?
Die Menüs mit dem Pfeil hinter dem Namen klappen so auf wie Du das vorhast...

http://www.marcel-kellner.de

 

[simusch]

Hmm, so ganz dasselbe ist es aber nicht...

Mein Problem ist grundsätzlich die vergrössernde Hintergrundfarbe, die sich hinter den Text schieben soll... Und ebendieser Text soll den Effekt auslösen.

 

[falkgottschalk]

Ähm - tut es doch? Es ist bunt, wird größer nach unten ... irgendwie verstehe ich nicht wieso das etwas anderes sein soll???

 

[simusch]

Ich habe das Problem jetzt lösen können.

Grund war wohl, dass ich die Hintergrundfarbe direkt dem Link-Tag zugewiesen habe und jQuery so die Animation nicht klar bekam.

Habe es jetzt anders gelöst:

    <style>
			li {
				display: block;
				position: relative;
				width: 72px;
				height: 72px;
				vertical-align: top;
				text-align: center;
			}

			li a {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
				width: 72px;
				height: 72px;
				line-height: 30px;
				color: black;
				text-decoration: none;
			}
				li a:hover {
					color: white;
					background: red;
				}

			li div {
				position:absolute;
				top: 0;
				left: 0;
				z-index: 4;
				width: 72px;
				height: 32px;
				text-align: center;

				background-color: red;
				text-decoration: none;
			}
    </style>

<li>
	<a href="#" class="jq2"><br/>kontakt</a>
	<div id="box" class="color"></div>
</li>

und das jQuery dazu:

				$(".jq2").hover(
					function() {
						var e = $('#box');

						e.css('height', '32px');
						e.css('cursor', 'pointer');
						$(this).css('background', 'none');

						e.stop().animate(
							{height: "72"},
							'2000',
							'swing',
							function() {
								$(this).css('color', 'white');
							}
						);
					},
					function() {
						var e = $('#box');

						e.css('height', '72px');
						e.css('cursor', 'pointer');

						e.stop().animate(
							{height: "32"},
							'2000',
							'swing',
							function() {
								$(this).css('color', 'black');
							}
						);
					}
				);

 

[falkgottschalk]

Danke fürs Posten der Lösung, irgend jemand freut sich bestimmt darüber.