[Deridjian]

Hallo liebe Mitleidende.

Ich habe da in meinem neuen Projekt ein paar Buttons (hurra!Buttons!)
Mit jQuery haben diese eine sehr geringfügige positions-animation verpasst bekommen mit .hover(function() und dann (this).animate({. Alles problemlos.
Die Buttons sind einfache DIVs mit einem anchor drin (Das sieht dann so aus):

<div id="kontaktcontainer">
MM<a class="pagelinks" id="kontakt" href="./kontakt.html" title="Interesse?" name="kontakt">Kontakt</a>
</div>

Jetzt hätte ich gerne dass bei Hover die Hintergrundfarbe des Buttons wechselt. (Keine Sorge! Ich weiß das ist simpel!) Ich könnte dies am einfachsten mit CSS und a:hover {background-color:rgba(x, x, x, a)} machen wenn ich den Anker als Block definiere und ihn auf die Größe des Buttons anpasse (Natürlich auch mit JS machbar).
Bei onClick und aktiviertem JS habe ich dann eine weitere kurze Animation (500ms) und ein setTimeout um nach 510ms den Link mit window.location weiterzugeben.

Mein Problem:
Wenn ich nach onClick die Maus nicht sofort vom Button wegbewege, ist sie nach wie vor im Hover-Zustand und belässt die eingetauschte Hintergrundfarbe. Das will ich nicht! (Sieht in meinem Fall schlimm aus, da die Animation den Button [das Div] vergrößert und damit den geschummelten Anker-Background bloßstellt)

Ich bräuchte also (meiner Meinung nach) eine JS Funktion, die mir beim Click den Hintergrund wieder löscht!

Ich hab's versucht mit .setAttribute/.removeAttribute ...
Ich hab's versucht mit .animate({ backgroundColor: 'XYZ' ...
Ich hab's versucht im Anker zu callen mit OnMouseOver/onClick
Ich hab's versucht extern zu callen mit doc.ready Funktionen...
Ich hab's gegoogelt...
Ich hab's gemedienstaltert...
Ich bin verzweifelt...

Hier übrigens noch ein Snippet mit dem ich extern ansteuern wollte, das nicht funktioniert hat, und bei dem das click event sowieso noch fehlt...(adaptiert von meiner positions-anim funktion, die wunderbar funktioniert):

$(function() {
MM$('a.pagelinks').hover(function() {
MMMM$(this).animate({
MMMMMMbackgroundColor: 'rgba(255, 255, 255, 0.4)',
MMMM}, {
MMMMMMqueue: false,
MMMMMMduration: 0
MMMM});
MM}, function() {
MMMM$(this).animate({
MMMMMMbackgroundColor: 'none',
MMMM}, {
MMMMMMqueue: false,
MMMMMMduration: 0
MMMM});
MM});
});

Ich hoffe Ihr könnt mein Problem nachvollziehen und eventuell sogar den ein oder anderen Lösungsansatz bieten. Das wäre wundervoll.
Vielen lieben dank,

Marian

[immerIch]

Du kannst mit .animate nur Positions sowie Größenangaben animieren. (top, left, right, bottom, height, width, margin-top ....) ...

[Deridjian]

Hallo ImmerIch,

danke erstmal für die Klarstellung von .animate Das hatte ich bisher wohl geschickterweise überlesen...

Dennoch ist mein Problem ja garnicht den Hover-Effekt zu erstellen, sondern den Hover-Effekt bei Click zu stoppen. Also so, dass es im Prinzip nach Click überhaupt kein Hover mehr gibt.

Hoffe ich konnte mich erklären

Gruß

[pantonine]