mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 10:33 Benutzername: Passwort: Auto-Login

Thema: Img fade in CSS gestyltem Menü? (jQuery/JS) vom 28.04.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Img fade in CSS gestyltem Menü? (jQuery/JS)
Autor Nachricht
Deridjian
Threadersteller

Dabei seit: 28.07.2010
Ort: Berlin
Alter: 39
Geschlecht: Männlich
Verfasst Do 28.04.2011 17:53
Titel

Img fade in CSS gestyltem Menü? (jQuery/JS)

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen.

Ich habe ein menü auf einer website mit css gestaltet. Der hover-effekt ist schlichtweg über den background des listen-elements gesteuert:

#menu li a b {display:block; width:130px; line-height:36px; color:#eee; background:url(../bilder/button_mid.gif) no-repeat top; text-decoration:none; font-size:11px; font-family:Verdana, Geneva, sans-serif; font-weight:bold; text-align:left; padding:0 0 0 0; margin:0 0 0 0; cursor:pointer; text-indent:10px; text-shadow:#333 0px 1px 1px;}
#menu li a:hover b {background:url(../bilder/button_mid.gif) no-repeat bottom; color:#fff;}

(Das Background Img beinhaltet beide Zustände und wird über top/bottom entsprechend ausgerichtet. Einfach, effektiv und schnell.)

Jetzt würde ich das ganze gerne irgendwie "faden" lassen. Glaskugel Ich überlege ob es sinnvoller ist die bilder lieber direkt einzeln abzuspeichern und mit jQuery .animate({"opacity"... z.B. irgendwas anzustellen, oder ob es nicht irgendeine Möglichkeit gibt die bestehende Methode zu animieren (Was mir wesentlich lieber wäre)? Muss ja auch nicht zwingend jQuery sein...
Für jegliche Ideen und Denkanstöße bin ich Euch sehr dankbar.

Grüße

Marian
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
immerIch

Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: Männlich
Verfasst Fr 29.04.2011 13:28
Titel

Antworten mit Zitat Zum Seitenanfang

jQuery.animate funktioniert nur bei Positions- bzw. Höhen/Breitenangaben.
Für das Faden bietet jQuery .fadeTo(DAUER IN MS, OPACITY).

Da du dann sowieso mit jQuery arbeitest, entfällt hier auch :hover.

Das Ganze könnte wie folgt aussehen:

Code:

$('element2').css('opacity','0.3');

$('element').hover(
   function () {
      $('element2').fadeTo(400,1)
   },
   function () {
      $('element2').fadeTo(400,0.3)
   }
);


gruß
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen jQuery Fade Effekt
Random PHP Script mit jquery fade
Hilfe bei JQuery fade in and out durch laden von Meta Tag
Menü per jquery animieren
jquery slidetoggle menü problem
Problem mit Jquery Akkordeon Menü
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.