- 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.
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?
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: