# jQuery- hover mit fade effekt



## mita1982 (30. April 2010)

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 (30. April 2010)

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 (30. April 2010)

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 (30. April 2010)

```
$(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 (30. April 2010)

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 (30. April 2010)

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 (30. April 2010)

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 (30. April 2010)

mita1982 hat gesagt.:


> 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 (30. April 2010)

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 (30. April 2010)

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.


----------



## mita1982 (30. April 2010)

also:

füge ich dem  li oder a tag den hintergrund home.jpg?

ansosnten habe ich es verstanden..


----------



## CPoly (30. April 2010)

Sollte beides gehen, aber ich meinte das a-Tag. Das muss dann natürlich display:block und eine Höhe und Breite haben (ich kenne dein css ja nicht, aber das wird es wohl auch jetzt schon haben).


----------



## mita1982 (30. April 2010)

CPoly hat gesagt.:


> Sollte beides gehen, aber ich meinte das a-Tag. Das muss dann natürlich display:block und eine Höhe und Breite haben (ich kenne dein css ja nicht, aber das wird es wohl auch jetzt schon haben).



ok ich probier das die Tage aus und melde mich hier mit dem Ergebnis wieder DANKE erstmal...


----------



## mita1982 (30. April 2010)

CPoly hat gesagt.:


> 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)*



*Warum ist ausgerechnet so optimal*

Kannst Du mal diese Technik genauer erläutern.. habe dasGefühl, dass selbst die Offizielle Seite von jQuery das so macht.. ich verscuhe ein wenig diese Seite zu analysieren um so professionell wie moglich das style sheat nächstes mal zu gestallen. und da ist mir das aufgefallen.. dass der hintergrund der Navi 82px hoch ist, aber die Navi an sich nur 41px...

darüberhinuas verstehe ich den status "scroll" bei einem backgroundbild nicht...


----------



## Maik (30. April 2010)

Hi,

das Stichwort lautet  "CSS Sprites". Weitere Artikel kannst du  den Suchergebnissen von google entnehmen.

Der Vorteil dieser Technik liegt ganz klar auf der Hand: Der Browser hat nur eine Grafikdatei zu laden, die er mittels der background-position-Eigenschaft im Anzeigebereich der einzelnen Elemente ausrichtet, und der Server-Traffic  so drastisch heruntergeschraubt wird.

Daher fällt die Grafikdatei auch größer (höher, breiter) aus, wie das Element selbst, das sie als Hintergrund ausschmückt.

In meinem CSS-Tutorial CSS-Rollover und CSS-Rollover - Teil 2 stelle ich diese Methode in den Abschnitten "CSS-Rollover mit background-image" im kleinen Maßstab auf die einzelnen Menüpunkte bezogen vor. In der produktiven Praxis würden alle Hintergrundzustände der einzelnen Menüpunkte in eine einzige Grafikdatei fließen.

Ein weiterer Pluspunkt gegenüber dem Tauschen zweier oder dreier Grafikdateien, die "Hover"-Grafiken flackern beim allerersten Aufruf nicht mehr kurz auf, wenn der Browser sie in diesem Moment erst in seinen Cache lädt.

Hier im Forum nutzen wir die Technik auch an diversen Stellen:


http://style.tutorials.de/v6/images/37/map_.png
http://style.tutorials.de/v6/images/37/map_poll_.png
http://style.tutorials.de/v6/images/37/map_y_.png
http://style.tutorials.de/v6/images/37/map_box_.png
http://style.tutorials.de/v6/images/37/map_btn_.png
http://style.tutorials.de/v6/images/37/map_menu_.png

... um mal eine kleine Auswahl an Anwendungsbeispielen zu nennen, die sich nicht ausschließlich auf Navigationsmenüs beschränken.

mfg Maik


----------



## mita1982 (30. April 2010)

Ok Danke ziehe mir gleich diese CSS-Sprites und deine CSS Rollover rein...

Doch damit kann man ja nicht, den hover effekt mit einem "rüberfaden" machen oder?

Also jQuery... 

noch eine kurze oftopic Frage.. ich habe dein Tutorial gelesen dreispalter layout.. und muss sagen, dass ich diese backgound-image im div wrapper selber schonmal ausgedacht habe.. wusste garnicht dass es sogar ein Namen trägt. Kommen wir zu meiner Frage das stellst du die Klasse  clearfix vor. wo kann man darüber diskutieren oder kannst du es nochmal erklären? vieleicht auch an anderer Stelle? dachte ein clear:left;: würde reichen..


----------



## Maik (1. Mai 2010)

mita1982 hat gesagt.:


> noch eine kurze oftopic Frage.. ich habe dein Tutorial gelesen dreispalter layout.. und muss sagen, dass ich diese backgound-image im div wrapper selber schonmal ausgedacht habe.. wusste garnicht dass es sogar ein Namen trägt. Kommen wir zu meiner Frage das stellst du die Klasse  clearfix vor. wo kann man darüber diskutieren oder kannst du es nochmal erklären? vieleicht auch an anderer Stelle? dachte ein clear:left;: würde reichen..


Der Ursprung der *clearfix*-Klasse findet sich in dem Artikel How To Clear Floats Without Structural Markup.

Diese CSS-Technik erspart dem Seitenautor ein, oder je nach Komplexitität der Seitenstruktur, mehrere inhaltsleere HTML-Elemente, die im Markup lediglich die Aufgabe übernehmen, eine Floatumgebung mit der clear-Eigenschaft abzubrechen.

Aus diesem Konstrukt:

```
<div> <!-- float container -->
  <div style="float:left; width:30%;"><p>Some content</p></div>
  <p>Text not inside the float</p>
  <div style="clear:both;"></div>
</div>
```

wird dann kurzerhand:

```
<div class="clearfix"> <!-- float container -->
  <div style="float:left; width:30%;"><p>Some content</p></div>
  <p>Text not inside the float</p>
</div>
```


Sollten dir noch weitere Fragen unter den Nägeln brennen, ist hierfür das CSS-Forum der passende Ort, denn mit diesem Thema hier hat dies alles ja nicht viel gemeinsam, und es soll hier ja schließlich bei einer kurzen "Off-Topic"-Frage bleiben, die dir an dieser Stelle auch gestattet sei.

mfg Maik


----------



## mita1982 (1. Mai 2010)

Ich weiß ja echt nicht wie oft ich Dir danken soll..

zwar verstehe ich noch nicht ganz warum man dasn machen muss.. aber In den letzten Tagen hast Du mir echt sehrviel geholfen.,

Vielcht stell ich echt im CSS Forum noch einige Fragen.. Aber es kein Design Forum hiergitb also webdesign.. nicht css, html, javscript php sondern Usability und eine Art Style Guide..

Vielen Dank nochmal und ich werde morgen oder übermorgen.. warscheinlich berichten ob es mit den Methoden hier klappt oder nicht.. Aber ich denke nicht, dass man mit den CSS Sprites einen Fade Effekt mit hilfe von jQuery erzeieln kann..


----------

