✔ JQuery Queuing-Problem beim Hovermenü und & ajax/Jquery Animation

Socimy · 2. August 2011

Hallo,

ich bin noch neu hier Forum, habe schon ein wenig durchgestöbert und finde es wirklich toll wie hier geholfen wird und hoffe jemand kann mir bei meinen Problem helfen.

Ich arbeite aktuell an einer Fan-Website für Star Trek Online, dies ist mehr eine Praxis-Übungsseite als eine Fan-Seite, da ich mich Privat ausgiebig mit Programmierung beschäftige.

Aber kommen wir zu meinen aktuellen Problemen, die ich auch nach mehrstündiger Suche im Internet und nach ausgiebiger Beratung mit meinem besten Freund (Mathematisch Technischer Assistent für Softwareentwicklung - sehr, sehr guter Programmierer) nicht lösen konnte.

hier könnt ihr euch die Seite mal anschauen: http://quantumnet.dyndns.org/~socimy/index.html

Links ist das Hovermenü welches mit der JQuery Funktion: .hover() und .animate()
"Ralf Stoltze's - Queuing Script" habe ich mir auch schon angeschaut, allerdings hilft mir dies auch nicht weiter. Hier mal der Code:

Code:

$("nav span").hover(function() {
			var menu = $(this).find('.submenu');
			
			menu.animate({width: '300px'}, function() {
				menu.find('.sub-middle').animate({height: '100%'});
			});
		}, function() {
			var menu = $(this).find('.submenu');
			
			menu.find('.sub-middle').animate({height: '0'}, function() {
				menu.animate({width: '0'});
			});
		});

Also folgendes soll eigentlich essentiell passieren, wenn man über den Link U.S.S. Hastings "hovert" soll das Menü sich öffnen, funktioniert auch tadellos, danach geht man nach rechts und wählt einen Link aus.

Problem Nr. 1: Menü bleibt nicht offen, sobald man aus dem Bereich heraus geht mit der Maus, schließt sich das Menü unter Umständen.

Problem Nr. 2: Wenn man von oben nach unten, mehrfach über die Mainlinks hovert, wird die Queue abgearbeitet und das Menü erscheint dann einfach solange bis die Queue leer ist, was ziemlich "bescheiden" aussieht und auch immer wieder zu anderen Problemen führen wird.

Hoffe hier weiß jemand Rat.

ajax/Jquery Animation - Problem

kommen wir zu meinem zweiten Problem:

Wenn man den Link "News" anklickt, soll der Inhalt des Content-Containers OutFaden und dann der untere Container "Blauer Balken" nach oben wandern. Dies wurde bei mir via animate

Code:

animate({ height: '0px' }, 1000, function()

bewerkstelligt.
Das danach der Inhalt wieder kommt wurde noch nicht implentiert. Hier mal der Code der Funktion:

Code:

$("#news").click(function() {
			$.ajax({
				url: 'news.html',
				success: function(data) {
					var el = $('#content');
						
					el.fadeOut(1000, function() {
						el.animate({ height: '0px' }, 1000, function() {
							el.html(data);
						});
					});
				}
			});
		});

Problem:

Wenn man "News" aktiviert wird der Inhalt erfolgreich ausgeblendet, danach allerdings taucht der Inhalt für 1 Sekunde wieder auf, die Höhe des Content verlängert sich ins Bodenlose und erst danach geht der Blaue Balken erfolgreich nach oben.

Die Frage ist nun wieso****?
Aus dem Code ist nicht ersichtlich warum das passiert, oder übersehe ich etwas?
Ich wäre für jede Hilfe dankbar.

Grüße

Socimy

CPoly · 2. August 2011

Zum ersten Problem: Nimm nicht "nav span" als Selektor sondern "nav > ul > li" (bessere wäre es dem ul eine ID zu geben). Denn du verlässt ja das span Element, wenn du mit der Maus nach rechts gehst. Das list Element aber nicht, denn dieses beinhaltet ja auch das submenu.

Zum zweiten Problem: Du lässt den Kasten verschwinden und willst ihn dann auf eine Höhe von 0 animieren? Der ist doch sowieso unsichtbar! Wolltest du das eventuell so

Javascript:

$("#news").click(function() {
	$.ajax({
		url: 'news.html',
		success: function(data) {
			var el = $('#content');

			el.fadeOut(1000, function() {
				el.html(data).fadeIn(1000);
			});
		}
	});
});

Oder so?

Javascript:

$("#news").click(function() {
	$.ajax({
		url: 'news.html',
		success: function(data) {
			var el = $('#content');
			
			el.slideUp(1000, function() {
				el.html(data).slideDown(2000);
			});
		}
	});
});

Socimy · 2. August 2011

Danke für die schnelle Antwort.

Die Frage ist kann ich ein <ul id="bla"> und darunter wieder <ul> haben?
Denn aktuell sieht es so aus:

HTML:

<nav>
					<div id="rect1"></div>
					<ul>
						<li><a id="news" href="#">NEWS</a></li>
						<li><a id="test" href="#">Test</a></li>
						<li>
							<span>
								U.S.S. Hastings
								<div class="submenu">
									<div class="sub-top"></div>
									<ul class="sub-middle">
										<li><a href="#">Sublink #1</a></li>
										<li><a href="#">Sublink #2</a></li>
										<li><a href="#">Sublink #3</a></li>
									</ul>
									<div class="sub-bottom"></div>
								</div>
							</span>
						</li>
						<li>
							<span>
								U.S.S. Ohio
								<div class="submenu">
									<div class="sub-top"></div>
									<ul class="sub-middle">
										<li><a href="#">Sublink #3</a></li>
										<li><a href="#">Sublink #4</a></li>
									</ul>
									<div class="sub-bottom"></div>
								</div>
							</span>
						</li>
					</ul>

Wegen Thematik zwei.

Das wäre ja nicht das Problem, aber ich möchte das "Out/In Faden" und das Sliden kombinieren.

Sprich der Inhalt soll langsam ausgeblendet werden, unterer Balken fährt nach oben, dann fährt er wieder nach unten und neuer Inhalt wird eingeblendet.

Wäre für weiter Hilfe denkbar.

Socimy · 2. August 2011

Also ich habe deinen ersten Vorschlag mit <ul> mal ausprobiert.
Problem ist allerdins hierbei ich kann denen nicht alle die selbe ID geben, dann funktioniert nur der erste.
Mit class geht es gleich mal gar nicht und jedem ul eine einzelne ID zu verpassen ist auch schlecht, weil dann müsste ich für jede ul ne Funktion schreiben oder müsste noch zusätzlich eine klasse definieren und damit dann über javascript arbeiten.

CPoly · 3. August 2011

Was du mit der ID für ein Problem hast, verstehe ich nicht. Du hättest dann ja z.B. so einen Selektor "#nav > li" und kannst dann im mouseenter und mouseleave auf das entsprechende Element zugreifen und dir wieder das passende ".submenu" suchen.

Zum anderen Problem. Ausfaden + Hochsliden

Javascript:

foo.animate({
    'height': 0,
    'opacity': 0
});

Das ganze in die andere Richtung geht leider nicht so einfach, weil du erst die neue Höhe berechnen müsstest (z.B. mit einem geklonten Element außerhalb der sichtbereiches).

Socimy · 3. August 2011

Bin für deine Hilfe immer dankbar.

Also der zweite Teil funktioniert schon mal sehr gut.
Das Problem mit höhe bin ich noch am evaluieren wie ich das evtl. bewerkstelligen könnte.
Es hat sich allerdings noch das Problem aufgetan wenn ich die opacity wieder auf hoch setze ist es gleich voll da und taucht nicht erst langsam auf, gibts dafür auch ne Lösung?

Wegen dem ersten Teil verstehe ich nicht ganz wie du das meinst, ich denke es gibt da ein Verständnisproblem bei mir.

Könntest du mir das bitte nochmal etwas näher erläutern mit dem nav li

Vielen lieben Dank.

CPoly · 3. August 2011

Wie setzt du die Opacity wieder auch hoch?

Javascript:

foo.animate({
    'opacity': 1
});

Jetzt zum Menu. Ich glaube was ich gesagt hab war falsch, weil dein komplettes Submenu ist ja innerhalb des span Elements (was unzulässig ist, weil span kein Block Elemente ist). Ich wollte den Selektor etwas besser wählen, weil "nav span" ja alle span Elemente irgendwo unterhalb eines nav Elements auswählt. Deshalb hätte ich dem "ul" eine id gegeben und z.B. "#nav > li" benutzt. Dann hast du nur die Elemente, die du wirklich brauchst. Innerhalb der hover Funktionen kannst du weiterhin über $(this).find('.submenu') das Untermenü selektieren.

Wenn ich das richtig sehe, funktioniert dein Menü jetzt fast korrekt oder?

Socimy · 3. August 2011

Ok Opacity war bei mir zu hoch eingestellt, aber ganz zum schluss aktualisiert der den Content nochmal.
Sehr merkwürdig...

Im übrigen arbeite ich derzeit lokal, aber ich kann das heute Abend mal hochziehen auf den Server, dann kannst es ja nochmal anschauen.

Also mit dem ersten Problem meinst also ich soll das dann so machen:

HTML:

<ul id="span">
			U.S.S. Hastings
				<div class="submenu">
				      <div class="sub-top"></div>
						<ul class="sub-middle">
							<li><a href="#">Sublink #1</a></li>
							<li><a href="#">Sublink #2</a></li>
							<li><a href="#">Sublink #3</a></li>
						</ul>
					<div class="sub-bottom"></div>
				</div>
</ul>

CPoly · 3. August 2011

Socimy hat gesagt.:

Also mit dem ersten Problem meinst also ich soll das dann so machen:

HTML:

<ul id="span">
			U.S.S. Hastings
				<div class="submenu">
				      <div class="sub-top"></div>
						<ul class="sub-middle">
							<li><a href="#">Sublink #1</a></li>
							<li><a href="#">Sublink #2</a></li>
							<li><a href="#">Sublink #3</a></li>
						</ul>
					<div class="sub-bottom"></div>
				</div>
</ul>

Jetzt fehlen dir aber völlig die "li" Elemente in der Äußeren Liste ;-).

Lade du das nachher hoch, dann haben wir nochmal den gleichen Stand.

Socimy · 3. August 2011

Werde ich dann machen, aber nochmal zum verständnis, also grob gesehen so oder wie?

HTML:

<ud id="span">
	<div class="submenu">
		<div class="sub-top"></div>
		<div class="sub-middle">
			<li class="sub-middle">
				<li>bla</li>
				<li>bla1</li>
				<li>bla2</li>
			</li>
		</div>
		<div class="sub-bottom"></div>
	</div>
</ul>

Sprich alles was unter <ul> ist in <li> abändern?
Die Frage ist würde das funktionieren?

✔ JQuery Queuing-Problem beim Hovermenü und & ajax/Jquery Animation

Socimy

Grünschnabel

CPoly

Mitglied Weizenbier

Socimy

Grünschnabel

Socimy

Grünschnabel

CPoly

Mitglied Weizenbier

Socimy

Grünschnabel

CPoly

Mitglied Weizenbier

Socimy

Grünschnabel

CPoly

Mitglied Weizenbier

Socimy

Grünschnabel

Neue Beiträge