jQuery- hover mit fade effekt

[mita1982]

Hallo Forum,

ich möchte gerne statt "onmouseover" das bild zu ersetzen, das bild mit einen fade effekt ersetzen.
daher habe ich das hier suprbiert.. nicht lachen bin grad in den Anfängen von jQuery

$(document).ready(function(){
$("#home").mouseout(function(event) {
        $("#home").attr({
            src: "images/buttons/home.jpg"
        }).("#home").fadeIn(800 );
});
$("#home").mouseover(function(event) {
    $("#home").attr({
        src: "images/buttons/home_hover.jpg"
    }).("#home").fadeIn(800 );
	});
});

er tauscht zwar das bild aus.. aber ohne hover woran kann das liegen?

 

[Quaese]

Hi,

dein Bild besitzt keine Transparenz. Deshalb wird die Quelle nur gewechselt, das Faden hat keinen sichtbaren Einfluss.

Du könntest zunächst die Transparenz auf 100% setzen - durch fadeOut(0).

Beispiel:

$(document).ready(function(){
  $("#home").mouseout(function(event) {
    $("#home").fadeOut(0).attr({
      src: "http://www.tutorials.de/forum/images/buttons/home.jpg"
    }).fadeIn(800 );
  });
  $("#home").mouseover(function(event) {
    $("#home").fadeOut(0).attr({
      src: "http://www.tutorials.de/forum/images/buttons/home_hover.jpg"
    }).fadeIn(800 );
  });
});

Zudem ist eine weitere Angabe von ("#home") unnötig - habe ich entfernt.

Ciao
Quaese

 

[mita1982]

funktioniet leider auch nicht..

denn die Fehlerkonsole gibt an:

Fehler: $("#home").fade is not a function
Quelldatei: http://www.vrc-racing.com/js/naviMouseOver.js
Zeile: 8

im netz gibt es nur beispiele mit klassen und einzelen divs die ein bzw. ausgeblendet werden..
Geht das vieleicht garnicht meine überlegung? #home it die id von img tag

 

[CPoly]

$(document).ready(function() {
			$("#home").hover(
				function() {
					$(this).fadeOut(function() {
						$(this).attr({"src":"neu.png"}).fadeIn();
					});
				},
				function() {
					$(this).fadeOut(function() {
						$(this).attr({"src":"alt.png"}).fadeIn();
					});
				});
		});

Erstmal binde ich das hover-Event (nimmt zwei Funktionen für Ein- und Ausfahrt der Maus). Im Event wird das Element ausgefadet. Die fade-Animation bekommt eine Funktion übergeben, welche am Ende der Animation getriggert wird (wenn das Bild unsichtbar ist). In dieser Funktion wird das Bild ausgetauscht und wieder eingefadet.

 

[mita1982]

Erstmal Danke!

muss wohl noch ein wenig jQuery studieren...

Gibt es die möglichkeit.. dass es gleizeit aus und eingefadet werden kann? also geht man mit der Maus rüber ändert sich der "button"... Jetzt wird ja das alte ausgefadet und das neue eingefadet...

hier mal der link damit ihr versteht was ich meine..

http://www.vrc-racing.com

 

[CPoly]

Hab ich das so zu verstehen, dass das alte und neue Bild praktisch ineinander übergehen und teilweise gleichzeitig zu sehen sind?
Zeig uns mal etwas von deinem HTML, denn so kann ich dir nicht weiter helfen. Denn um beides zu sehen, reicht ja ein einziges img-Tag nicht aus, sondern du musst zwei überlagernde Elemente haben.

 

[mita1982]

Ja genau das meine ich.. schade dass es so "einfach nicht geht.. dann mache cih das wphl weiterhin mit onmouseover..onmouseout...

weil das ganze ist ja eine liste mit img-tags und per css so angepasst dass da kein rand ist etc. dass ist mir dann wohl zu schwer mit jeweils zwei tags zu arbeiten.. Aber es geht doch beim click event oder nicht? also ich klcike auf einen button.. und dann fadet ein bild über ein anderes.. da dachte ich es ginge auch mit hover bzw. mouseover

 

[CPoly]

dann mache cih das wphl weiterhin mit onmouseover..onmouseout...

Ohne fade oder wie meinst du das? Weil meine hover()-Funktion ist ja nichts anderes als ein Shorthand für onmouseover und onmouseout.

Wie gesagt, wenn du uns das HTML-Markup deines Menüs zeigst, finden wir bestimmt eine Lösung.

 

[mita1982]

Ok hier...
habe es nur an home bzw. index ausprobieren wollen..

<div id="divNavi">
    <ul id="navi">
      <li><a href="index.php"><img src="images/buttons/home.jpg"      alt="home"  id="home" /></a></li>
      <li><a href="bikes.php"><img src="images/buttons/bikes.jpg"   onmouseover="document.getElementById('bikes').src='images/buttons/bikes_hover.jpg';" onmouseout="document.getElementById('bikes').src='images/buttons/bikes.jpg';" alt="bikes"  id="bikes" /></a></li>

      <li><a href="videos.php"><img src="images/buttons/videos.jpg"   onmouseover="document.getElementById('videos').src='images/buttons/videos_hover.jpg';" onmouseout="document.getElementById('videos').src='images/buttons/videos.jpg';" alt="videos" id="videos" /></a></li>
      <li><a href="contact.php"><img src="images/buttons/kontakt.jpg"   onmouseover="document.getElementById('kontakt').src='images/buttons/kontakt_hover.jpg';" onmouseout="document.getElementById('kontakt').src='images/buttons/kontakt.jpg';"  alt="kontakt" id="kontakt" /></a></li>
    </ul>
  </div>

 

[CPoly]

Erstmal ein Tipp: Wenn du Javascript direkt im Attribut stehen hast und das gleiche Element ansprechen willst, braucht du kein "document.getElementById()" sondern du kannst "this" benutzen.

Jetzt die Lösung deines Problems Verbal formuliert. Wenn du dann noch Probleme mit der Umsetzung hast, meld dich nochmal.
1.Verpasse deinen Links als Hintergrundbild das Bild, welches im normalen Zustand angezeigt werden soll (z.B. home.jpg)
2.Füge die img-Tags ein, aber mit mit style="display:none" und home_hover.jpg
3.Beim onmouseover des Links fadest du das img-Tag ein
4.Beim onmouseout des img-Tags fadest du es aus.

Das ganze lässt sich auch beliebig anders gestalten (span-Tag anstelle des img-Tag und dafür beim span ein Hintergrundbild. Wenn du dann noch home.jpg und home_hover.jpg in eine einzige Datei packst und mit background-positition arbeitest, wäre das optimal)
Auch ließe es sich genau anders herum machen, also dem Link das hover-Bild verpassen.

Probier einfach mal bisschen rum.