Menüfrage in JQuery

[Mikelop]

Hallo, ich denke ich habe eine einfache Frage, für die ich leider keine Lösung finde.

Ich verwende ein JQuery Menü aus dem Internet, bei dem es 3 Grafiken gibt:

Default, Hover und Aktiv.

Soweit so gut. Hat auch alles prima geklappt, nur leider sollte die Hovergrafik nicht geladen werden, wenn der betreffende Menüpunkt gerade ausgewählt (aktiv) ist.

Hier mal der HTML- und Jquery-Code:

<ul id="nav">  
<li class="test1"><a href="test.php?go=test1"></a><div class="hover"></div></li>
<li class="test2"><a href="test.php?go=test2"></a><div class="hover"></div></li>
<li class="test3"><a href="test.php?go=test3"></a><div class="hover"></div></li>
<li class="test4"><a href="test.php?go=test4"></a><div class="hover"></div></li>
<li class="test5"><a href="test.php?go=test5"></a><div class="hover"></div></li>
</ul>

	$('li').hover(
		
		//Mouseover, fadeIn the hidden hover class	
		function() {
    
			$(this)
			.children('div')
			.stop(true, true)
			.css('filter', 'alpha(opacity=40)')
			.fadeIn('1000');
		}, 
	
		//Mouseout, fadeOut the hover class
		function() {		
			
			$(this)
			.children('div')
			.stop(true, true)
			.css('filter', 'alpha(opacity=40)')
			.fadeOut('1000');	
		
	}).click (function () {
	
		//Add selected class if user clicked on it
		$(this)
		.addClass('current_page_item')
		.siblings('#nav li')
		.removeClass('current_page_item');
	});

Wie schaffe ich es das der Hove-Effekt, also das fadein und fadeout der Hovergrafik bei einem aktivierten Menüpunkt nicht stattfindet?

Habe es schon mit If probiert:

	$('li').hover(
		
		//Mouseover, fadeIn the hidden hover class	
		function() {
		  if (Class != 'current_page_item') {
    
			$(this)
			.children('div')
			.stop(true, true)
			.css('filter', 'alpha(opacity=40)')
			.fadeIn('1000');
		}
		}, 
	
		//Mouseout, fadeOut the hover class
		function() {		
			
			$(this)
			.children('div')
			.stop(true, true)
			.css('filter', 'alpha(opacity=40)')
			.fadeOut('1000');	
		
	}).click (function () {
	
		//Add selected class if user clicked on it
		$(this)
		.addClass('current_page_item')
		.siblings('#nav li')
		.removeClass('current_page_item');
	});

Funktionierte aber nicht. Bin noch recht am Anfang mit der Javascript-Area...

Wahrscheinlich ist es ganz einfach. Dachte so ne Abfrage, wenn die Class aktiv ist, dass dann kein Hover ausgeführt wird.

Danke für eure Hilfe!

 

[Quaese]

Hi,

dein Ansatz sieht doch schon sehr vielversprechend aus. Versuch es mal mit der Methode hasClass.

if(!$(this).hasClass('current_page_item')){
  $(this)
  .children('div')
  .stop(true, true)
  .css('filter', 'alpha(opacity=40)')
  .fadeIn('1000');
}

Ciao
Quaese

 

[Mikelop]

Ja super, funktioniert. Danke!

Jetzt ist aber ein weiteres Problem sichtbar. Klicke ich einen Menüpunkt an, bleibt der Hover-Effekt dem Aktiven Menüpunkt überlagert, bis ich mit der Maus vom dem Punkt weggeh, dann setzt der FadeOut-Effekt ein.

Besser wäre es, sobald man auf den Menüpunkt klickt, also die Class ändert, dass das Hoverbild nicht gefadet wird sondern sofort ausgeblendet wird. ( .hide ?)

Hier mal mein geänderter Code:

	$('li').hover(
		//Mouseover, fadeIn the hidden hover class	
		function() {
			if(!$(this).hasClass('current_page_item')){
			  $(this)
			  .children('div')
			  .stop(true, true)
			  .css('filter', 'alpha(opacity=40)')
			  .fadeIn('1000');
			}
		}, 
		//Mouseout, fadeOut the hover class
		function() {			
			  $(this)
			  .children('div')
			  .stop(true, true)
			  .css('filter', 'alpha(opacity=40)')
			  .fadeOut('1000');		
	}).click (function () {
		//Add selected class if user clicked on it
		$(this)
		.addClass('current_page_item')
		.siblings('#nav li')
		.removeClass('current_page_item');
	});

Braucht ihr einen Link zu der Seite?

 

[Quaese]

Hi,

versteckt das hover-Bild, wie bereits von dir vermutet, mit der hide-Methode im click-Event.

$('li').hover(
  //Mouseover, fadeIn the hidden hover class
  function() {
    // ...
  },

  //Mouseout, fadeOut the hover class
  function() {
    // ...
  }).click (function () {
    //Add selected class if user clicked on it
    $(this)
    .addClass('current_page_item')
    .siblings('#nav li')
    .removeClass('current_page_item');

    $(this).children('div').stop(true, true).hide();
});

Ciao
Quaese

 

[Mikelop]

Wunderbar! Wunschlosglücklich.

Super schnelle und perfekte Hilfe! Danke