Hintergrundfarbe per JQuery dynamisch wechseln mit Effekt

Submitted by Julian Pustkuchen on 7. January 2010 - 8: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:

$(document).ready(function(){
$('.elementToHover').hover(
function () {
$(this).animate({backgroundColor:"#FFFFFF"}, 600);
},
function () {
$(this).animate({backgroundColor:"#000000"}, 500);
}
);
});

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

Einordnung:

Comments

Guter Beispiel

Submitted by Gast (not verified) on 4. May 2011 - 11:17.

Geiler Effekt, einfache umsetzung

danke

Post new comment

Your name: *

E-mail: *

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.

Homepage:

Subject:

Comment: *

Web page addresses and e-mail addresses turn into links automatically.
Internal paths in single or double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or path. Paths to files in single or double quotes, written as "files:somefile.ext", for example, are replaced with the appropriate URL that can be used to download the file.
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.
Each email address will be obfuscated in a human readable fashion or (if JavaScript is enabled) replaced with a spamproof clickable link.

More information about formatting options

Notify me when new comments are posted

Word verification: * Type the characters you see in this picture.

(verify using audio)

Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

Julian Pustkuchen ist passionierter Software- & Webentwickler mit den Schwerpunkten Softwaredesign, Objektorientierung, Ablaufoptimierung und Usability bei webks. Ein weiterer Schwerpunkt ist die Entwicklung im CMS Drupal.
Er besitzt einen Abschluss als B.Sc. Wirtschaftsinformatik (dual) und studiert derzeit für seinen Abschluss als Master of Science Wirtschaftsinformatik.