Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Marcel Weber 8. April 2010

jQuery-Plugin Color Animations – Menüs mit wechselnden Farben animieren

Roll-over-Effekte für Menüs haben eine lan­ge Tradition und bie­ten gute Möglichkeiten, die Navigation inter­es­san­ter und über­sicht­li­cher zu gestal­ten. Sicher haben Sie schon Menüs gese­hen, deren Text oder Hintergrundfarbe sich bei Mouseover ändert und beim Verlassen der Maus lang­sam wie­der ver­blasst, so dass eine Art von Slide-Show- oder Animations-Effekt ent­steht. Solche Menüs wur­den meist mit Flash rea­li­siert. Da im Zuge der Barrierefreiheit zuneh­mend auf Flash ver­zich­tet wird, sehe ich die­se Animationen bei Menüs in letz­ter Zeit immer weni­ger. Im Fall der in Flash umge­setz­ten Varianten ist dies für mich kein gro­ßer Verlust, da ich Flash hier für falsch ein­ge­setzt anse­he. Dieser Effekt lässt sich näm­lich sehr ein­fach mit jQuery und dem Color Animations Plugin rea­li­sie­ren.


Ein Klick aufs Bild öff­net eine Seite mit Demos.

Das Color Animations Plugin

Die .ani­ma­te() Methode von jQuery ist eine tol­le Sache die vie­le Möglichkeiten bie­tet, nur lei­der gehört die Animation von Farben stan­dard­mä­ßig nicht dazu, doch durch das Einbinden des Color Animations plugin von John Resig ist auch das mög­lich.

Alternativ kann auch jQuery UI Effects ein­ge­bun­den wer­den, um Farben zu ani­mie­ren. Wenn also schon jQuery UI Effects ein­ge­bun­den sind, kann auf das Color Animations Plugin ver­zich­tet wer­den.

Vorüberlegungen

Das Menü soll:

  • Farben ani­mie­ren kön­nen, Schrift- und/ oder Hintergrundfarben
  • Ohne Java Script funk­ti­ons­fä­hig blei­ben
    • Realisiert durch ein CSS Fallback
  • Auch per Tastatur bedient wer­den kön­nen und funk­tio­nie­ren
    • Realisiert durch focus events
  • Die Aktuelle Seite auf „active“ set­zen und nicht ani­mie­ren

Um die Animation auch per Tastaturbedienung zu ermög­li­chen, ver­wen­de ich hier die focus Evente .focu­sin() und .focus­out(). Diese Funktionen ste­hen in jQuery ab der Version 1.4 zur Verfügung, daher ist die Mindestanforderung auch jQuery 1.4.

HTML und CSS

Die Demo prä­sen­tiert ver­ti­ka­le und hori­zon­ta­le Menüs in ver­schie­de­nen Ausführungen –  mit akti­vem Element und ohne, mit und ohne Hintergrund. Bei der Variante ohne Hintergrund wech­selt die Textfarbe.


Menü mit Hintergrund

Grundstruktur

Das Menü besteht aus einer unsor­tier­ten Liste und ein­fa­chen Textlinks, die akti­ve Seite wird durch die Klasse „active“ her­vor­ge­ho­ben und von der Animation aus­ge­schlos­sen.
Durch die Klasse „jMenue“ grei­fen wir in jQuery auf die Links zu, die Klasse „jMenueNoJs“ dient dem CSS Fallback und die Klasse „horizontalMenue“ wird im Beispiel benö­tigt, da ver­ti­ka­le und hori­zon­ta­le Menüs auf einer Seite dar­ge­stellt wer­den.

CSS

Die Komplette CSS-Datei möch­te ich hier nicht erläu­tern, das wür­de sicher die meis­ten lang­wei­len, des­halb beschrän­ke ich mich auf die, mei­ner Meinung nach, wich­tigs­ten Stellen und Eigenschaften.

.jMenue{
cursor: pointer;
list-style-type: none;
padding:0;
}

Je nach dem wie das Menü gestylt wird, kön­nen Leerräume zwi­schen den ein­zel­nen Links ent­ste­hen. Wenn der Mauszeiger nun in die­sem Leerraum ist, wird natür­lich nicht die link­ty­pi­sche Hand ange­zeigt. Dies kann zu einem „Flackern“ des Mauszeigers füh­ren, des­halb wei­sen wir dem Mauszeiger im kom­plet­ten Menübereich die link­ty­pi­sche Hand zu.
<

>
.jMenue .active{
color: #000;
}

Dem akti­ven Menüpunkt, sofern er vor­han­den ist, wir die Farbe zuge­wie­sen, zu der bei Mouseover gewech­selt wird, hier Schwarz (#000).

.jMenue :focus{
outline: none;
}

Da wir den Focus-Zustand eines Links expli­zit visu­ell erkenn­bar machen, kön­nen wir auf den stan­dard­mä­ßi­gen Rahmen ver­zich­ten.

.jMenueNoJs a:hover,
.jMenueNoJs a:focus{
color:#000;
}

Wenn Java Script nicht akti­viert ist, wird die Linkfarbe bei Hover und Focus per CSS gewech­selt. Diese Klassen wer­den mit­tels jQuery ent­fernt, dazu aber spä­ter mehr.

Der jQuery Part

$('ul').removeClass('jMenueBGNoJs .jMenueNoJs');

Diese Zeile ist der CSS Fallback, funk­tio­niert ganz ein­fach: Wenn JavaScript akti­viert ist, wer­den die CSS-Klassen .jMenueBGNoJs und .jMenueNoJs mit der .removeClass() Methode ent­fernt. Wenn nicht, blei­ben die Klassen bestehen und sor­gen für den Farbwechsel.

Textfarbe animieren

$(".jMenue a").not(".active, .jMenueBG a").each(function(){
$(this).bind({
mouseenter: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
mouseleave: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
},
focusin: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
}
})
});
$(".jMenue a").not(".active, .jMenueBG a").each(function(){

Alle Links der Klasse ‚jMenue wer­den selek­tiert. Mit der .not() Methode wer­den die Klasse .active und die Links der Klasse . jMenueBG von die­ser Selektion aus­ge­schlos­sen.
Die Links der Klasse .jMenueBG müs­sen hier nur aus­ge­schlos­sen wer­den, wenn wie in der Demo Menüs mit Text und Hintergrundanimation auf einer Seite ein­ge­bun­den sind.
Mit der .each()-Methode wer­den nun für jedes Element der Selektion nach­ein­an­der die Anweisungen in der geschweif­ten Klammer aus­ge­führt.

$(this).bind({


Menü ohne Hintergrund – hier wird die Farben der Textlinks gewech­selt.

Auf das jewei­li­ge Element wird mit $(this) zuge­grif­fen. Da wir die jQuery-Version 1.4 ver­wen­den, kön­nen wir mit der .bind() Methode meh­re­re Eventhandler an ein Element bin­den. Die fol­gen­den Events wer­den nun, durch ein Komma getrennt, an das jewei­li­ge Element gebun­den.
mou­se­en­ter: func­tion(){
Dieser Event wird aus­ge­löst sobald sich der Mauszeiger über einem Link befin­det.

$(this).stop().animate({ color: '#000' }, 'fast');
},

Wir grei­fen wie­der mit $(this) auf das jewei­li­ge Element zu. Falls noch eine Animation für die­ses Element läuft wird die­se mit der .stop() Methode ange­hal­ten. Anschließend wird die aktu­el­le Farbe des Linktextes zu schwarz (#000) ani­miert. Als Dauer für die Animation wird hier „fast“ ver­wen­det, was einer Zeit von 200 Millisekunden ent­spricht.
mou­se­lea­ve: func­tion(){
Dieser Event wird aus­ge­löst sobald der Mauszeiger den Link ver­lässt.

$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
},

Hier wird durch die Angabe von “true” als zwei­ter Parameter der .stop() Methode eine even­tu­ell noch lau­fen­de Animation sofort auf den Endzustand der Animation gesetzt. Dadurch wird sicher­ge­stellt dass die Animation von Schwarz nach Blau statt fin­det und nicht von einem Grau nach Blau. Als Dauer für die Animation wird hier „slow“ ver­wen­det, was einer Zeit von 600 Millisekunden ent­spricht.

focusin: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
}
})
});

Dasselbe wird auch für die Events “focu­sin” und “focus­out” aus­ge­fürt, um den Effekt eben auch per Tastatur zu ermög­li­chen.

Hintergrundfarbe animieren

Der Code zum Animieren der Hintergrundfarbe unter­schei­det sich nur wenig, des­halb gehe ich hier nur auf die klei­nen Unterschiede ein.

$(".jMenueBG a").not(".active").each(function(){

Da wir hier die Klasse .jMenueBG ver­wen­den, müs­sen wir auch nur die Klasse .active() von der Animation aus­schlie­ßen.

>$(this).bind({
mouseenter: function(){
$(this).stop().animate({ backgroundColor: '#000' }, 'fast');
},

Anstatt “color” wird hier “backgroundColor” ani­miert. Hier müs­sen Sie auf die Schreibweise ach­ten: “back­ground-color” funk­tio­niert nicht.

mouseleave: function(){
$(this).stop(false,true).animate({ backgroundColor: '#427BB5' }, 'slow');
},
focusin: function(){
$(this).stop().animate({ backgroundColor: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ backgroundColor: '#427BB5' }, 'slow');
}
})
});

Active Link

Das Menü ohne akti­ven Link zu ver­wen­den ist recht sim­pel, dafür wird ein­fach die Klasse .active nicht gesetzt. Wenn die­se nicht exis­tiert, kann sie natür­lich auch aus der .not()-Methode ent­fernt wer­den – oder Sie ver­zich­ten kom­plett auf die­se Methode.

Fazit

Die ver­wen­de­ten Farben und Animationsgeschwindigkeiten sind natür­lich Geschmackssache – sie die­nen nur als Beispiel. Farbe und Geschwindigkeit kön­nen Sie ganz ein­fach an die eige­nen Bedürfnissen anpas­sen. Ebenso kön­nen Sie nicht nur Links ani­mie­ren, son­dern die vor­ge­stell­ten Funktionen auf DIV-Container oder Tabellen anwen­den. Der Kreativität sind kaum Grenzen gesetzt.

(mm),

Marcel Weber

Student der Kommunikations- und Softwaretechnik

7 Kommentare

  1. Ist zwar schon ein älte­rer Artikel aber viel­leicht hilft jeman­den mei­ne Antwort. Das Iframe-Plugin ist nicht mehr not­wen­dig seit es CSS3 Transition gibt. Habe dazu einen tol­len Artikel gefun­den: http://www.solife.cc/blog/animation-farben-css3-transition.html

    Kann nun alles in 2 Zeilen CSS abge­wi­ckelt wer­den.. super! :-)

  2. hm, ich glau­be mit sol­chen ani­ma­tio­nen kommt man ganz leicht von “oh-ha!” nach “oh-oh…” wenn mans ueber­treibt. bei den demos muss­te ich spon­tan an die­se roten “knight-rider scan­ner” gifs den­ken die mit­te der 90er ger­ne als text­tren­ner miss­braucht wur­den. :D
    ist der -web­kit-tran­si­ti­ons effekt css3 stan­dard und haelt irgend­wann auch die rest­li­chen brow­ser ein­zug, oder ist die­ser effekt ein web­kit-only fea­ture?

  3. Sehr schö­ner Artikel.
    Solch ein klei­ner net­ter Effekt fehlt mir auf mei­ner pri­va­ten Webseite noch.
    Ich den­ke ich wer­de es mal ein­bau­en.

  4. Danke für die­sen net­ten Artikel.

  5. “meis­tens mit Flash” ist im seriö­sen Webdesign nicht kor­rekt in die­sem Zusammenhang. Schon seit län­ge­rer Zeit nut­zen Webentwickler aus ver­schie­de­nen Gründen java­script & CSS3.

    Neben der Darstellbarkeit in allen Browsern ver­rin­gert es auch erheb­lich die Ladezeit gegen­über Flash und belas­tet auf­grund sei­ner enorm klei­nen Dateigrösse kaum.

  6. @hanspeter: Ist ja schön, aber es bringt in der Praxis wenig, wenn nur etwa 10% aller Benutzer den gewünsch­ten Effekt sehen kön­nen. Mit jQuery dürf­ten alle wich­ti­gen Browser abge­deckt wer­den. Über ande­re Methoden kön­nen wir uns in viel­leicht 2 Jahren noch­mal unter­hal­ten.

  7. Das geht doch mit CSS3 bzw. -web­kit-tran­si­ti­ons viiiiel ein­fa­cher und ent­spre­chend ohne JavaScript … schaut euch mal mit einem WebKit-Browser (also z.B. Safari oder Chrome) die Hauptnavigation von z.B. http://www.macprime.ch an, die set­zen die­se “CSS-Animation” dort sehr anspre­chend ein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.