jQuery hover über größere Grafik

grafagoggel

James Grieve
Registriert
26.11.09
Beiträge
138
Heyo Leute,

ich hab ein kleines Problem beim Design und umsetzen meines Logo's für meinen zukünftigen Blog. Folgendes Problem. Ich habe mein Logo designed und will dieses mit jQuery durch einen hover Effekt animieren.

Der Schriftzug "grafagoggel" hat 4 g's jedes "g" hat eine Art Schein mit einer eigenen Farbe, der recht groß ist (die zwei letzen g's haben einen Schein gemeinsam). Wenn man nun mit der Maus über eines der g's fährt soll der Schein von dem gehoverten g stärker werden. Da der Schein aber recht groß ist und die Scheine (!?!?) der g's sich überlappen und sich sozusagen der Schein über den ganzen Schriftzug erstreckt ist jede hover-Grafik so groß wie der eigentliche Schriftzug.

Jetzt habe ich ein kleines jQuery Skript geschrieben, dass beim hovern einer der Grafiken die Opacity der hover Grafik von 0 auf 1 schraubt.

Das Skript sieht so aus.

Code:
<script type="text/javascript">
jQuery(document).ready(function(){

	jQuery("ul#logo li").hover(function() {
		jQuery(this).find('img').addClass("hover").stop()
			.animate({
				opacity: 1, 
			}, 100);
		
		} , function() {
		jQuery(this).find('img').removeClass("hover").stop()
			.animate({
				opacity: 0,
			}, 2000);
	});

	 
});
</script>

Jetzt habe ich jeder der hover-Grafiken ein padding zugewiesen. Und zwar so dass der eigentliche Teil immer nur das "g" abdeckt. Jedoch reagiert das Skript auch auf das padding. Gibt es eine Möglichkeit dem Skript zu sagen dass er das padding ausschließen soll?

Ich hoffe ihr könnt mir irgendwie folgen...

Vielen Dank schonmal! Greetz

Hab hier jetzt mal ein jQuery Plugin gefunden, komm aber nicht wirklich damit klar... Ist es überhaupt dafür gedacht?
 
Zuletzt bearbeitet:

lowpixel

Becks Apfel (Emstaler Champagner)
Registriert
25.10.07
Beiträge
333
Könntest du das ganze irgendwo hochladen? Wäre einfacher :)
 

lowpixel

Becks Apfel (Emstaler Champagner)
Registriert
25.10.07
Beiträge
333
Erstens das und zweitens, warum machst du sowas mit Javascript und nicht mit Flash? Wäre hier denke ich besser geeignet.
Zu der Flash Geschichte kann ich für meinen Teil sagen, dass man Flash nur für Online-Anwendungen nutzen sollte. Mich nervt es ständig auf einer Webseite Flash in einer Navigation o.ä. zu sehen, wo man hätte auch Javascript etc. einsetzen können und ich glaube so geht es vielen!
 

knalli

Stechapfel
Registriert
19.01.10
Beiträge
159
Nö, Flash ist nicht geeigneter. Nur weil jemand keine Ahnung hat, wird in so einen Falle auf Flash zurückgegriffen.. ist aber nicht notwendig.

@Op: Soweit ich das richtig verstanden habe, musst du nur absolut/relativ positionierte Elemente mit transparenten Hintergrund einfügen. Ein, zwei Screenshots würden aber sicherlich helfen, damit wir das richtig verstehen.

Ansonsten, soweit ich das jetzt verstanden habe: position:absolute/relative, top/left, overflow: hidden..und evtl. zIndex.