[JS] Transparenter Hover-Effekt

[Keito2903]

Hey ich hab mal wieder ein Problem.

Ich will einen Hover-Effekt erzielen finde aber keinen geeigneten.

Ich habe es mir so vorgestellt:

Bei Mauskontakt ein Fade-In und wenn keine Maus drauf ist ein langsames Fade-Out.

Kennt jemand nen Namen oder ein Script dafür?

Vielen Dank

 

[MegaAdi]

AW: [JS] Transparenter Hover-Effekt

Wenn du nur moderne Browser ansprechen willst geht das mit CSS3. Stichwort hierfür ist Transition.

Für Javascript habe ich diese Seite gefunden.


Gruß Adrian

 

[Keito2903]

AW: [JS] Transparenter Hover-Effekt

Hi, danke.

Ich möchte möglichst alle Browser ansprechen, deshalb ist der erste Link nicht so meins, da er bei mir im neusten Opera und Firefox unterschiede zeigt.

Im 2ten wird nur erklärt, wie man ein Bild verschiebt und das sieht bei meinem Bild nicht gerade schön aus.

Ich meinte so etwas wie nur mit Hintergrundbildern anstatt einer Hintergrundfarbe.

Der Versuch den Code so abzuändern, dass er für mich tauglich ist, schlug kläglich fehl.

 

[Dewy]

AW: [JS] Transparenter Hover-Effekt

$("img.wieauchimmer").hover(
function() {
$(this).stop().animate({"opacity": "0"}, 400);
},
function() {
$(this).stop().animate({"opacity": "1"}, 1500);
});

Also das hatte ich so gelöst, halt mit JQuery.
Legst einfach 2 images aufeinander, keine png's --> das eine wird ausgefaded und das andere dahinter kommt zum vorschein --> sieht aus wie ein fadeeffekt; halt gefaked

 

[MegaAdi]

AW: [JS] Transparenter Hover-Effekt

besagter 2. Link führt auch zu einer Demo-Seite: jQuery Background Test Beispiel C und D sind glaub ich das, was du suchst richtig?

Gruß Adrian


EDITH: Grade gesehen dass da tatsächlich nur ne Grafik verschoben wird... schade. Dachte ich konnte dir helfen.

 

[Keito2903]

AW: [JS] Transparenter Hover-Effekt

$("img.wieauchimmer").hover(
function() {
$(this).stop().animate({"opacity": "0"}, 400);
},
function() {
$(this).stop().animate({"opacity": "1"}, 1500);
});

Also das hatte ich so gelöst, halt mit JQuery.
Legst einfach 2 images aufeinander, keine png's --> das eine wird ausgefaded und das andere dahinter kommt zum vorschein --> sieht aus wie ein fadeeffekt; halt gefaked

Wie genau soll ich denn die 2 Bilder übereinander legen?

Bin noch nicht so erfahren ^^

@MegaAdi: Danke dir trotzdem =D

 

[Dewy]

AW: [JS] Transparenter Hover-Effekt

1. Bild Nr. 1 ausspielen, das den hovereffekt hat; also vielleicht ein Button mit (i.d.F) Farbe blau.
2. Bild Nr. 2 ausspielen, das den "Normalzustand" i.d.F. grauer Button darstellt.

Beide Buttons müssen natürlich exakt die gleiche Grösse haben.
Nun legst du Button 2 mit pos. absolut AUF Button 1. Der Skript wird nun beim mouseover den 2. Button ausfaden --> der 1. Button der genau dahinterliegt "faded" ein bzw. kommt einfach zum vorschein; sieht jedoch wie ein cooler fade aus. Beim Mouseout wird nun der 2. Button, der ja ausgefaded wurde, wieder eingefaded.

Ich schick dir mal via pm meine alte Seite auf der ich das noch eingebaut hatte; kannste dir da bisschen abschauen.


Gruß

 

[MegaAdi]

AW: [JS] Transparenter Hover-Effekt

Ich hab mal noch n bischen gegooglet und das hier gefunden:
Background Change with fadeIn. How? - jQuery Forum Vielleicht hilft dir das ja weiter

 

[Keito2903]

AW: [JS] Transparenter Hover-Effekt

Sorry aber irgendwie ist das ein bisschen zu hoch für mich ich kann da kaum was mit anfangen^^

Kann mir das einer am Beispiel meiner Seite evtl zeigen?

 

[Myhar]

AW: [JS] Transparenter Hover-Effekt

An deiner Stelle würde ich auf alle Fälle erst einmal einen CSS Hover-Effekt auf der Seite einbauen, den die Leute ohne JS zu Gesicht bekommen (ist außerdem auch um vieles schneller gemacht)
Dann kannst du den JS-Hover Effekt einbauen. (Btw. ich würde gerne endlich eine breitere Unterstützung von CSS3 begrüßen, aber das ist ja leider nicht so einfach möglich :-D... Nur so am Rande )
Wo ist dein konkretes Problem bei der Umsetzung der genannten Lösung?

[...]
Also das hatte ich so gelöst, halt mit JQuery.
Legst einfach 2 images aufeinander, keine png's --> das eine wird ausgefaded und das andere dahinter kommt zum vorschein --> sieht aus wie ein fadeeffekt; halt gefaked

Das hier ist im Prinzip das Selbe was auch MegaAdi gepostet hat. Hast du ein Problem mit der Beschreibung von Dewy, wie du die Grafiken erstellen sollst?
Einfach zwei Grafiken, welche genau übereinandergelegt werden. Wenn du nun die obere ein- und ausfaden lässt, dann kommt die darunterliegende zum Vorschein.

L. G.