✔ jQuery Navigation Bug!

ZipZek

ZipZek

Mitglied
Hey,

ich habe ein kleines Problem mit einer Navigation:
Wenn ich nach dem Laden der Seite das erste mal über die Navigation fahre und diese komplett ausladen lasse, bleiben die ausgefahrenen Navi-Quadrate übereinander neben dem Hauptelement "profile" stehen, obwohl sie verschwinden sollten.

Wenn ich jedoch nach dem Laden der Seite einmal kurz über "profile" fahre, die Elemente also nicht ganz ausfahren lasse und nun nochmal drüber gehe und sie dann komplett ausfahren lasse funktioniert alles.

Es ist schwer zu erklären aber ich hoffe ihr seht was ich meine und könnt mir helfen :confused:

hier mal der Code:

HTML: 
<html>
<head>
<title>Test1</title>
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

	<style type="text/css">
        #about{
            position:absolute;
            top:169px;
            left:266px;
        }
        #about a { 
            float:left; 
            height:87px;
            width:87px; 
            color:#ffffff;
        }
            .fade1{ width:0px; display:none; float:left; }
            .fade2{ width:0px; display:none; float:left; }
            .fade3{ width:0px; display:none; float:left; }
        
            .profile{ float:left; background-color:#C90; }
            a.profile:hover{ background-color:#000; color:#ffffff; }
            
            .vita{ background-color:#C60; }
            a.vita:hover{ background-color:#000; color:#ffffff;; }
            
            .service{ background-color:#C30; }
            a.service:hover{ background-color:#000; color:#ffffff; }
            
            .news{ background-color:#C06; }
            a.news:hover{ background-color:#000; color:#ffffff; }
    </style>

	<script type="text/javascript">
		$(document).ready(function() {
							
				$('#about').hover(function() {	
							$("#about .fade1").stop().animate({width : "87px"}, 600);
							$("#about .fade2").stop().animate({width : "87px"}, 600);
							$("#about .fade3").stop().animate({width : "87px"}, 600);	
									
				}, function() {
							$("#about .fade1").stop().animate({width : "0"}, 400);
							$("#about .fade2").stop().animate({width : "0"}, 400);
							$("#about .fade3").stop().animate({width : "0"}, 400);
			
				}); 
				
		});
    </script>

</head>

<body>

      <div id="about">
              <div class="profile"><a href="#" title="profile" class="profile">profile</a></div>
              <div class="fade1"><a href="profile/index.html" title="vita" class="vita">vita</a></div>
              <div class="fade2"><a href="#" title="service" class="service">service</a></div>
              <div class="fade3"><a href="#" title="news" class="news">news</a></div>
      </div>
   
</body>
</html>


Vielen Dank im vorraus :)
 
Zuletzt bearbeitet:
Moin,

Es geht besser, wenn du den div's noch overflow:hidden verpasst:
Code: 
$(document).ready
      (
        function() 
        {
          $("#about div:not(.profile)").css({overflow:'hidden'});
          $('#about div').hover
            (
              function() 
              { 
                $("#about div:not(.profile)").stop().animate({width : "87px"}, 600);
              }, 
              function() 
              {
                $("#about div:not(.profile)").stop().animate({width : "0"}, 400);
              }
            ); 
        }
      );

P:S: hab den Selektor mal etwas geändert, muss man net so viel schreiben ;)
 
Zuletzt bearbeitet:
Aaahh okay!
Vielen vielen Dank, nun klappt es wunderbar!

Ich beschäftige mich erst seit ca 3 Tagen mit jQuery und JS, also Danke nochmals!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück