Autor |
Nachricht |
grafagoggel
Threadersteller
Dabei seit: 21.04.2008
Ort: Laichingen
Alter: -
Geschlecht:
|
Verfasst Mo 18.01.2010 14:08
Titel jQuery hover über größere Grafik |
|
|
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?
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 18.01.2010 14:22
Titel
|
|
|
ja entweder über
foo.css('padding','0');
oder
foo.addClass('nopadding');
Zuletzt bearbeitet von Kash am Mo 18.01.2010 14:29, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
grafagoggel
Threadersteller
Dabei seit: 21.04.2008
Ort: Laichingen
Alter: -
Geschlecht:
|
Verfasst Mo 18.01.2010 14:32
Titel
|
|
|
hmm sorry das verstehe ich jetzt noch nicht so ganz... Was soll dieses foo bedeuten? und muss das ganze in den .animate Teil oder wie? Sorry bin in jQuery noch nicht so der König
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 18.01.2010 14:35
Titel
|
|
|
foo ist ein Platzhalter.
Bitte informiere dich über die von mir geposteten Bsp hier
Oder benutze Google, da solltest du genügend Bsp und Hilfen finden.
|
|
|
|
|
|
|
|
Ähnliche Themen |
jQuery - Hover
Hover mit JQuery flackert
Javascript / jQuery: Menü mit Hover bzw. Touch-Events
Grafik-Austausch mit jQuery
hover-Button/hover-Bild wird darunter eingefügt
Bildkonverter für größere Mengen
|
|