Hintergrundfarbe per JQuery dynamisch wechseln mit Effekt

Posted 7. January 2010 - 9:41

Ich habe mich gefragt, wie man mit JQuery die Hintergrundfarbe als Hover-Effekt wechseln kann.

Nach einiger Zeit kam ich auf die folgende Lösung, die super aussieht und natürlich zusätzlich mit Verformungseffekten etc. versehen werden kann:

  1. $(document).ready(function(){
  2.   $('.elementToHover').hover(
  3. 	  function () {
  4.         $(this).animate({backgroundColor:"#FFFFFF"}, 600);
  5.       }, 
  6.       function () {
  7.        $(this).animate({backgroundColor:"#000000"}, 500);
  8.       }
  9.   );
  10. });

Der Unterschied zum CSS Hover ist, dass der Effekt hereingefaded wird uns nicht auf Schlag wirkt.

Wichtig ist, dass ihr das jquery.color.js - Paket installiert, damit JQuery korrekt mit Farbwerten umgehen kann.
Ihr erhaltet es hier: http://plugins.jquery.com/project/color

Trackback URL for this post:

http://julian.pustkuchen.com/en/trackback/186

Comments

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><blockquote>
  • Lines and paragraphs break automatically.
  • Pairs of<blockquote> tags will be styled as a block that indicates a quotation.
  • You can enable syntax highlighting of source code with the following tags: <c>, <cpp>, <css>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <smarty>, <xml>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Textual smileys will be replaced with graphical ones.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.