mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:38 Benutzername: Passwort: Auto-Login

Thema: jQuery hover über größere Grafik vom 18.01.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jQuery hover über größere Grafik
Autor Nachricht
grafagoggel
Threadersteller

Dabei seit: 21.04.2008
Ort: Laichingen
Alter: -
Geschlecht: Männlich
Verfasst Mo 18.01.2010 14:08
Titel

jQuery hover über größere Grafik

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mo 18.01.2010 14:22
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
grafagoggel
Threadersteller

Dabei seit: 21.04.2008
Ort: Laichingen
Alter: -
Geschlecht: Männlich
Verfasst Mo 18.01.2010 14:32
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mo 18.01.2010 14:35
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.