Navigation jQuery

Danke das 2. Problem wäre numit auch gelöst.

Das erste bezieht sich nicht auf einen HTMl Code sondern auf den jQuery Code. Nehmen wir beispielsweise das einfaden und ausfaden des dunklen Hintergrundes. Wenn ich normal diesen Code hier nehme:
Code: 
$("#nav_background").fadeIn("slow");
Dann passiert nichts wenn ich mit der Maus langsam arbeite. Also erst einfaden lassen, dann erst mit der Maus von der Navigation fahren zum herausfaden.
Code: 
$("#nav_background").fadeIn("slow");
Wenn ich allerdings kurz auf die Navigation fahre (der Hintergrund einfadet) und ich gleich wieder runter und dies mehrmals wiederhole, dann blendet der Hintergrund ohne Mauszeigerbewegung mehrmals ein und aus (also so Nachzügler der mehrmaligen drüberfahrens). Ich habe nun nach "Prevent Animation Queue" gesucht und wurde mit stop() auch fündig. Ich glaube zumindest, dass das stop() den Fehler behebt oder liege ich falsch?
Code: 
$("#nav_background").stop().fadeIn("slow");

EDIT: Wenn ich fadeTo benutze dann entsteht des "Nicht Einblenden Problem" nicht, allerdings muss ich fadeOut benutzen, weil ich nciht nur die Transparenz ändern will, sondern es komplett weg sein soll (hide())

Nun allerdings gibt es mit oder ohne stop(); ein weiteres sehr seltsames Problem. Wenn ich wieder normal arbeite mit der Maus (warten usw.) geht alles, wenn ich allerdings schnell bin aus Spass (schnell einfaden und ausfaden lassen) dann fadet irgendwann der Hintergrund gar nicht mehr ein. Also wenn ich drüberfahre über die Navigation dann wird der Hintergrund nicht dunkler, obwohl er eigentlich "fadeIn()" machen sollte. An was liegt das?

Der komplette jQuery Code sieht so aus für diesen Teil:
Code: 
$("#main_nav").mouseenter(function() {		
		$("#nav_background").stop().fadeIn("slow");	
		$("ul li.sub", this).stop().fadeIn("slow");		
	});
	$("#main_nav").mouseleave(function() {								 
		$("#nav_background").stop().fadeOut("slow");
		$("ul li.sub", this).stop().fadeOut("slow");
		
		
	});
 
Hi,

du kannst stop mit zwei Parametern aufrufen.

Hast du schon mal nachfolgende Variante getestet?
Code: 
stop(false, true)
Ansonsten wäre es nicht schlecht, wenn du den zugehörigen HTML-Code (inkl. CSS-Formatierung) zugänglich machen würdest, da es in meinem Testdokument wie gewünscht funktioniert.

Ciao
Quaese
 
Das mit dem stop werde ich gleich mal versuchen, mir geht es hauptsächlich darum, dass nach schnellen drauf und weg von der Navi, die Subnavigation irgendwann nicht mehr einblendet.

HTML Head
Code: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>

<title>Untitled Document</title>
</head>

HTML
Code: 
<div id="main_nav">
	<ul>
    	<li class="logo"><a href=""><img src="images/nav_pic.png" /><p>Hier steht ein text</p><img src="images/nav_logo.png" /></a></li>
        <li class="stuff"><a href=""><img src="images/nav_stuff.png" /><p>Dies ist eine Beschreibung</p></a></li>   
 
        <li class="info"><a href=""><img src="images/nav_info.png" /><p>Dies ist eine Beschreibung</p></a></li> 
        <li class="blog"><a href=""><img src="images/nav_blog.png" /><p>Dies ist eine Beschreibung</p></a></li>
        <li class="menu"><a href=""><img src="images/nav_menu.png" /><p>Dies ist eine Beschreibung</p></a></li>     
    </ul>    
</div>
<div id="nav_background">&nbsp;</div>

CSS

Code: 
@charset "UTF-8";

* { margin: 0; padding: 0; border: 0; }
html, body {	
	background-color: #dad4a0;
	background-image:url(../images/test.png);
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;	
	background-attachment: fixed;	
}
#main_nav {
	position: absolute;
	z-index: 3;
	top: 10px;
	left: 10px;
}
#main_nav ul { width: 265px; }
#main_nav ul li { float: left; margin-right: 10px; margin-bottom: 10px; list-style-type: none;  }
#main_nav ul li a {
	font-size: 10px; 
	color: #333; 
	font-family: Calibri, Arial, Helvetica, sans-serif;	
	padding: 10px;
	text-decoration: none;
	display: block;
	width: 102px;
	height: 102px;
	-webkit-border-radius: 4px;    
    -moz-border-radius: 4px;
    border-radius: 4px;	
	
	background-color: #c9c285;
	background-image: url(../images/nav_gradient.png);
		 
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#fa7500', EndColorStr='#e95f00');
	
	-moz-box-shadow: 0 1px 5px #a6a27b;
    -webkit-box-shadow: 0 1px 5px #a6a27b;
     box-shadow: 0 1px 5px #a6a27b;
	 filter: progid:DXImageTransform.Microsoft.Shadow(color='#a6a27b', Direction=160, Strength=3);
}
#main_nav ul li.logo a {	
	color: #d6d098;
	background-color: #fa7500;
	background:-moz-radial-gradient(left, #fa7500, #e95f00); 
	background:-webkit-gradient(radial, center center, 0, center center, 80, from(#fa7500), to(#e95f00)); 		 
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#c9c285', EndColorStr='#dcd6a1');	
}
#main_nav ul li a:hover { color: #d6d098; }
#main_nav ul li a p { margin-top: 8px; margin-bottom: 13px; }
#nav_background { z-index: 1; position: fixed; top: 0; left: 0;width: 100%; height: 100%;  background-image: url(../images/back_pattern.png); }
#main_nav ul li.active a {	
	color: #d6d098;
	background-color: #5c594e;
	background: -moz-radial-gradient(center, #7a7762, #5c594e);
	background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 90, from(#7a7762), to(#5c594e));	
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#5c594e', EndColorStr='#7a7762');		
}

Javascript
Code: 
$(document).ready(function(){  
	var 
		_src,
		_srcHover;		
	$(function(){
	  var 
	  	strHREF = "http://www.info.threeview.com"; /*String(window.location)*/	 
	  $('#main_nav ul li').each(function(i){
		if(strHREF.search(new RegExp($(this).attr('class'))) != -1){
		  if(i != 0)
			$(this).insertBefore($(this).parent('ul li:eq(1)'));
	 
		  $(this).addClass('active');
		  _src = $("img",this).attr("src"); 		
		  _srcHover = _src.replace(/([^.]*)\.(.*)/, "$1_hover.$2");		
				
		  $("img", this).attr("src",_srcHover);    
		} else if(!$(this).hasClass("logo")) { /* Submenü verstecken */
			$(this).hide();
			$(this).addClass("sub");
		}
	  });
	})	
	
	$("#nav_background").hide();
		
	$("#main_nav").mouseenter(function() {		
		$("#nav_background").stop().fadeIn("slow");	
		$("ul li.sub", this).stop().fadeIn("slow");		
	});
	$("#main_nav").mouseleave(function() {								 
		$("#nav_background").stop().fadeOut("slow");
		$("ul li.sub", this).stop().fadeOut("slow");
		
		
	});
	$("li").mouseenter(function() {  
		if(!$(this).hasClass("active") && !$(this).hasClass("logo")) {			
			_src = $("img",this).attr("src"); 		
			_srcHover = _src.replace(/([^.]*)\.(.*)/, "$1_hover.$2");						
			$("img", this).attr("src",_srcHover);    			
			$("a",this).stop().animate({ backgroundColor: "#5c594e"}, "fast");    
		}
	}); 
						  
	$("li").mouseleave(function() {  
	  	if(!$(this).hasClass("active") && !$(this).hasClass("logo")) {
			$("img", this).attr("src",_src);    
			$("a",this).stop().animate({ backgroundColor: "#c9c285"}, "normal"); 
		}		
	}); 
});
 
Hi,

wenn ich die Parameter wie beschrieben an stop übergebe, tritt bei mir das von dir beschriebene Phänomen nicht auf.

Ciao
Quaese
 
Habe es auch gerade getestet, funktioniert nun bei mir auch, vielen Dank für die Hilfe, soweit wären alle Fragen geklärt soweit, mal schauen, was sich noch ergibt
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück