0800 - SPACEQUADRAT

JS - Textlinks animieren

Neuen Beitrag schreiben
deezigns
User
images/default_ava.png
Beiträge: 70
Spacecoins: 79

JS - Textlinks animieren

am 15.04.2011 um 19:29 Uhr

Hallo,

weil ich jQuery irgendwie cool finde, und ich die Funktionen ausprobieren will, möchte ich jetzt den Hover einer Navigation damit verändern.

Anstatt einfach die Farbe zu wechseln soll diese langsahm in die andere übergehen, das hier will nicht:

  1. $('a.nav_home').hover(
  2.  function () { 
  3.  $(this).animate({color: '#666'}, 400, 'linear');
  4.  },
  5.  function() {
  6.   $(this).animate({color: '#666'}, 400, "linear");
  7.  }
  8. )

Hab noch nicht wirklich viel mit JS gemacht und bin deshalb auch ein Noob was jQuery angeht...

Gruß Deezign

gadgaet
Advanced Member
images/avatars/979a38f4419f588a526bd0f6db6b77ad.png
Beiträge: 979
Spacecoins: 199

Re: JS - Textlinks animieren

am 15.04.2011 um 19:48 Uhr

Ich kann mir gut vorstellen, dass du nichts siehst, wenn du einen Übergang zur imemr selben Farbe einbaust...
Ändere mal eine deiner beide #666, dann dürfte der Code durchaus funktionieren.

grüssse
g.

__________________

Füttere niemals die Hand, die dich beißt!

deezigns
User
images/default_ava.png
Beiträge: 70
Spacecoins: 79

Re: JS - Textlinks animieren

am 15.04.2011 um 19:51 Uhr

hmm naja
das ist schon logisch, jedoch ist über CSS als ausgangsfarbe #999 festgelegt, und es geschieht überhauptnichts wenn man über den link fährt

  1. <a class="nav_home" href="?page=home">Home</a>

gadgaet
Advanced Member
images/avatars/979a38f4419f588a526bd0f6db6b77ad.png
Beiträge: 979
Spacecoins: 199

Re: JS - Textlinks animieren

am 15.04.2011 um 20:02 Uhr

Ah, ich hab das Problem gefunden: jQuery unterstützt nativ keine Farbanimationen. Du brauchst dieses Plugin, damit läuft es dann einwandfrei:
http://plugins.jquery.com/project/color

__________________

Füttere niemals die Hand, die dich beißt!

deezigns
User
images/default_ava.png
Beiträge: 70
Spacecoins: 79

Re: JS - Textlinks animieren

am 15.04.2011 um 20:26 Uhr

muss man das dan speziell benutzen? Bei mir funktioniert es einfach nicht.

gadgaet
Advanced Member
images/avatars/979a38f4419f588a526bd0f6db6b77ad.png
Beiträge: 979
Spacecoins: 199

Re: JS - Textlinks animieren

am 16.04.2011 um 09:32 Uhr

Nein, speziell benutzen muss man das nicht. Es integriert sich einfach in jQuery.

Bist du sicher, dass dein obiger Code erst ausgeführt wird, wenn die Links bereits existieren? Heißt mit $(document).ready() zum Beispiel.

Bei mir geht folgender Code einwandfrei:

  1. <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html >
  4.  <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   [removed][removed]
  7.   [removed][removed]
  8.   [removed]
  9.    $(document).ready(function()
  10.    {
  11.     $('a.nav_home').hover(function()
  12.     {
  13.      $(this).animate({color: '#f66'}, 400, 'linear');
  14.     }, function()
  15.     {
  16.      $(this).animate({color: '#666'}, 400, 'linear');
  17.     });
  18.    });
  19.   [removed]
  21.  </head>
  22.  <body>
  23.   <a class="nav_home" href="http://google.de" style="color:#999">safxcmnfdxcf</a>
  24.  </body>
  25. </html>

Ich habe nur einmal eine andere Farbe eingesetzt, damit der Effekt besser sichtbar ist.

grüssse
g.

EDIT: Die [removed] stehen für Script-Tags. Das obere für jQuery, das darunter für jQuery.color und die letzten beiden für ganz normales JS ;)

__________________

Füttere niemals die Hand, die dich beißt!

deezigns
User
images/default_ava.png
Beiträge: 70
Spacecoins: 79

Re: JS - Textlinks animieren

am 17.04.2011 um 20:21 Uhr

Ja, funktioniert einwandfrei ;)

Danke.