JQuery - merkwürdiger unregelmäßiger Fallback bei .hover und .animate()

W

Webflasher

Mitglied
Hallo Leute,

ich benutze den unten angegebenen Code um mein Menü zu animieren. Allerdings kommt es in Chrome und Safari zu unregelmäßigen ausfällen. Die Funktion, die beim Verlassen der Maus aufgerufen wird, tritt manchmal einfach nicht in Kraft und in Firefox tut sich einfach mal gar nichts...
Irgendeine Idee?

Danke

HTML Code:
PHP: 
<section id="navigation">
      <div class="menue_item" style="margin-left:5%;">
        <nav class="mi_01">
        <div class="nav_info">
          <h3 class="nav_title">###</h3>
          <p class="nav_details"> ***</p>
        </div>
        </nav>
      </div>
      <div class="menue_item">
        <nav class="mi_02">
        <div class="nav_info">
          <h3 class="nav_title">###</h3>
          <p class="nav_details">***</p>
        </div>
        </nav>
      </div>
      <div class="menue_item">
        <nav class="mi_03">
        <div class="nav_info">
          <h3 class="nav_title">###</h3>
          <p class="nav_details"> ***</p>
        </div>
        </nav>
      </div>
      <div class="menue_item">
        <nav class="mi_04">
        <div class="nav_info">
          <h3 class="nav_title">###</h3>
          <p class="nav_details"> ***</p>
        </div>
        </nav>
      </div>
      <div class="menue_item" style="margin-left:5%;">
        <nav class="mi_05">
        <div class="nav_info">
          <h3 class="nav_title">###</h3>
          <p class="nav_details"> ***</p>
        </div>
        </nav>
      </div>
    </section>

Der CSS Code:
PHP: 
.menue_item {
	border-width: 0px;
	/* Firefox v1.0+ */
	-moz-border-radius: 16px;
	/* Safari v3.0+ and by Chrome v0.2+ */
	-webkit-border-radius: 16px;
	/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
	border-radius: 16px;
	width: 125px;
	height: 125px;
	margin-top: 10px;
	margin-left: 3%;
	margin-right: 3%;
	float: left;
}
nav {
	float: left;
	width: 125px;
	height: 125px;
	/* Firefox v1.0+ */
	-moz-border-radius: 16px;
	/* Safari v3.0+ and by Chrome v0.2+ */
	-webkit-border-radius: 16px;
	/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
	border-radius: 16px;
}
.nav_info {
	/* Firefox v1.0+ */
	-moz-border-radius: 0px 0px 16px 16px;
	/* Safari v3.0+ and by Chrome v0.2+ */
	-webkit-border-radius: 0px 0px 16px 16px;
	/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
	border-radius: 0px 0px 16px 16px; /* 16px */
	border-style: solid;
	border-width: 0px; /* 7px */
	border-color: #6CD731/*rgb(34, 67, 59)*/;
	background-image: url(../images/menue/info_bg.fw.png);
	background-size: cover;
	height: 25px; /* 125px */
	margin-top: 100px; /* 0px */
}
.nav_title{
	font-family: "myriad-pro",sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size:16px;
	color:#FFF;
	text-align:left;
	margin-left:5px;
	margin-top:0px;
}
.mi_01 {
	background-image: url(../images/menue/01.png);
	background-size: cover;
}
.mi_02 {
	background-image: url(../images/menue/02.png);
	background-size: cover;
}
.mi_03 {
	background-image: url(../images/menue/03.png);
	background-size: cover;
}
.mi_04 {
	background-image: url(../images/menue/04.png);
	background-size: cover;
}
.mi_05 {
	background-image: url(../images/menue/05.png);
	background-size: cover;
}


.nav_details{
	font-family: "myriad-pro",sans-serif;
	font-style: italic;
	font-weight: 300;
	color: #FFF;
	text-align: left;
	margin-left: 5px;
	display:none; /* block */
	
}

p{
	font-family: "myriad-pro",sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size:12px;
	color:#FFF;
	text-align:left;
	margin-left:5px;
	margin-right:5px;
}

JQuery Code:
PHP: 
$(".menue_item").hover(
	
	 function(e) {
 //falls die Maus über den Menütitel fährt;Sicherstellung, dass "target" ein mi_0* ist
		 var target = $(event.target).attr('class');
		 if (target == 'nav_info'){
			 var final_target = $(event.target).parent().attr('class');
		 }else{
			 var final_target = $(event.target).attr('class');
		 }
		$('.'+final_target +' .nav_info').animate({
			height:'125px',
			marginTop:'0px',
			borderWidth:'3px',
			borderRadius:'16px'
		}, 1000)
		$('.'+final_target +' .nav_info').css("-moz-border-radius", '16px');
		$('.'+final_target +' .nav_info').css("-webkit-border-radius", '16px');
		$('.'+final_target +' .nav_details').css("display", 'block');
	},function(e) {
//falls die Maus über den Menütitel fährt;Sicherstellung, dass "target" ein mi_0* ist
		var target_leave = $(event.target).attr('class');
		 if (target_leave == 'nav_info'){
			 var final_target_leave = $(event.target).parent().attr('class');
		 }else{
			 var final_target_leave = $(event.target).attr('class');
		 }
		$('.'+final_target_leave +' .nav_info').animate({
			height:'25px',
			marginTop:'100px',
			borderWidth:'0px',
			borderRadius:'0px 0px 16px 16px'
		}, 1000)
			$('.'+final_target_leave +' .nav_info').css("-moz-border-radius", '0px 0px 16px 16px');
			$('.'+final_target_leave +' .nav_info').css("-webkit-border-radius", '0px 0px 16px 16px');
			$('.'+final_target_leave +' .nav_details').css("display", 'none');
		
	});
 
Firefox meldet "event is not defined" (erste Zeile in der Funktion), was ich ihm nicht verübeln kann.
 
Hey, danke erstmal.

Bezüglich Firefox....was ist den an dem Ausdruck "$(event.target).parent().attr('class')" falsch?

Super, danke, mit dem überarbeiteten Code schein es ja zu klappen, ich probiere das morgen mal aus.

Danke
 
oh, das war nicht meine Absicht...

Mein Ziel ist es herauszufinden, über welches Element, mit welcher Klasse die Maus fährt.

Zudem kommt, dass ich irgendwo anscheinend einen anderen Fehler habe, denn wenn ich deinen abgewandelten Code von tinker bei mir einsetzte oder in ein ganz neues Dokument packe, funktioniert gar nicht mehr. Aber in der Vorschau auf Tinker klappts...

Danke nochmals
 
Vergiss es, sorry, lag an einer veralteten JQ Version!

Jetzt klappt alles, vielen vielen DANK******

Könntest du mir vielleicht noch einmal kurz erklären, was genau an meinem Code falsch war und wie du das in deinem behoben hast...?!

Danke :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück