Garavani
Mitglied
Registriert: 13.05.2012
Beiträge: 4
|
|
Hallo Leute,
wieder einmal verzweifle ich (als Anfänger) am simpelsten, weil mir die Programmiersyntax einfach nicht in den Kopf will :-(
Habe folgende html gebastelt und möchte das beim mousehover über eines der 4 divs (den Rest des Codes habe ich der Übersicht halber gelöscht) die jeweils anderen 3 divs verschwinden via fadeOut bzw. wieder auftauchen beim Mouse verlassen via FadeIn.
Das habe ich wie folgt (eigentlich) hingekriegt:
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
...
</head>
<body style="overflow: hidden; background-color: #787878" >
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function fadeoutRecherche() {
$('#Collection').fadeOut(200, 'linear');
$('#Corporate').fadeOut(200, 'linear');
$('#Contact').fadeOut(200, 'linear');
}
function fadeinRecherche() {
$('#Collection').fadeIn(200, 'linear');
$('#Corporate').fadeIn(200, 'linear');
$('#Contact').fadeIn(200, 'linear');
}
function fadeoutCollection() {
$('#Recherche').fadeOut(200, 'linear');
$('#Corporate').fadeOut(200, 'linear');
$('#Contact').fadeOut(200, 'linear');
}
function fadeinCollection() {
$('#Recherche').fadeIn(200, 'linear');
$('#Corporate').fadeIn(200, 'linear');
$('#Contact').fadeIn(200, 'linear');
}
function fadeoutCorporate() {
$('#Recherche').fadeOut(200, 'linear');
$('#Collection').fadeOut(200, 'linear');
$('#Contact').fadeOut(200, 'linear');
}
function fadeinCorporate() {
$('#Recherche').fadeIn(200, 'linear');
$('#Collection').fadeIn(200, 'linear');
$('#Contact').fadeIn(200, 'linear');
}
function fadeoutContact() {
$('#Recherche').fadeOut(200, 'linear');
$('#Corporate').fadeOut(200, 'linear');
$('#Collection').fadeOut(200, 'linear');
}
function fadeinContact() {
$('#Recherche').fadeIn(200, 'linear');
$('#Corporate').fadeIn(200, 'linear');
$('#Collection').fadeIn(200, 'linear');
}
</script>
<div id="Collection" style="bla bla;" onmouseover="fadeoutCollection();" onmouseout="fadeinCollection();"><img src="images/COLLECTION.png"></div>
<div id="Recherche" style="bla bla;" onmouseover="fadeoutRecherche();" onmouseout="fadeinRecherche();"><img src="images/RECHERCHE.png"></div>
<div id="Corporate" style="bla bla;" onmouseover="fadeoutCorporate();" onmouseout="fadeinCorporate();"><img src="images/CORPORATE.png"></div>
<div id="Contact" style="bla bla;" onmouseover="fadeoutContact();" onmouseout="fadeinContact();"><img src="images/CONTACT.png"></div>
</body>
</html>
Leider blinken die divs aber auch beim ein- und ausfaden merkwürdig.
Habe auch relativ schnell herausbekommen, dass das normal ist bei dieser unklugen Methode und dass sich statt dessen eine hover.function empfiehlt.
Nur leider bekomme ich es partout nicht hin, dass richtig zu coden :-(
Ist sicher furchtbar simpel.
Kann mir irgendjemand unter die Arme greifen und einen Beispiel-Code geben?
Mein grundsätzliches Problem ist, dass ich immer enorme Schwierigkeiten bei der Syntax habe, also genauestens wissen muss wo welche $… oder Funktion reingeschrieben werden müssen,
also an welche Stelle etc. Ich bräuchte daher den code-Teil und die Platzierung in der html.
Danke vielmals schon im Voraus!!
bin sicher, dass ich es irgendwann mal schnalle. :-)
Garavani
|
|
| 23.06.2012 13:46:10 |
|
