Javascript animierte Navigation

[Philipp88]

Hallo

leider bin ich an einem Punkt wo ich nicht weiß wie man dieses schnell und einfach mit Jquery lösen kann

Für eine Webseite muss ich so eine Navigation wie hier http://www.maserati.de/, also den Hover.
Meine Idee wäre, den inaktiven Zustand als Hintergrund einzubinden und bei li:hover auszutauschen. Soweit kein Problem, nur weiß ich nicht wie ich mittels Jquery den Effekt hinbekomme

Kann mir jemand ein Denkanstoß geben?

Ich würde mich sehr freuen
Danke im Voraus
Philipp

 

[cebito]

AW: Javascript animierte Navigation

Für eine Webseite muss ich

Welche? Muss klingt in meinen Ohren wie "ein Auftraggeber fordert". Sollte es so sein und du bietest eine Leistung einem dritten an die du selbst nicht erbringen kannst ->

 

[Duddle]

AW: Javascript animierte Navigation

Sollte es so sein und du bietest eine Leistung einem dritten an die du selbst nicht erbringen kannst ->

Das trifft wohl auf ein geschätztes Viertel aller Fragen in diesem Unterforum zu

Zur Frage selbst verweise ich mal ganz einfach auf folgende Artikel, die verschiedenste animierte Navigationen vorstellen:


Die dort verlinkten Ideen sind zwar schon recht alt aber die Ansätze kannst du dir ja abschauen. Ohne jetzt allen Links gefolgt zu sein kommt http://snook.ca/archives/javascript/jquery-bg-image-animations/ recht nah an die Maserati-Geschichte.


Duddle

 

[Philipp88]

AW: Javascript animierte Navigation

danke werde mal die Links anschauen

 

[leveler]

AW: Javascript animierte Navigation

Für eine Webseite muss ich so eine Navigation wie hier http://www.maserati.de/, also den Hover.
Meine Idee wäre, den inaktiven Zustand als Hintergrund einzubinden und bei li:hover auszutauschen. Soweit kein Problem, nur weiß ich nicht wie ich mittels Jquery den Effekt hinbekomme

Firebug ist Dein Freund. Denn grundsätzlich hast Du die Lösung des Ganzen ja schon vorliegen.

 

[Curanai]

AW: Javascript animierte Navigation

...sieht für mich nach CSS-Sprites mit "animate()" (Beispiel in der originalen jQ-Doc) aus ... aber mein Auto hab ich da auch her - ist toll.

 

[Philipp88]

AW: Javascript animierte Navigation

Ich habe jetzt den Code von Duddle letzten Link nachprogrammiert. Irgendwie geht das aber nicht

Könnt ihr mir den Fehler sagen?

(das Hintergrundbild fehlt leider)
http://jsfiddle.net/PkP9F/1/

 

[Curanai]

AW: Javascript animierte Navigation

1. Du bei jsfiddle kein jQ verwenden, wenn links in der Auswahl "pure" genannt wird.

2. Ich hab's Dir mal umgestellt - da ich da jetzt kein Update von jsfiddle bekomme, um eine URL hier abzustellen - der Source:

EDIT: der FIDDLE

<div id="navigation">
    <ul>
        <li><a href="http://www.google.de">Aktuelles</a></li>
    </ul>
</div>

#navigation ul li  {
  display: inline-block;
}

#navigation ul li a  {
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  display: block;
  width: 116px;
  padding: 15px 0 11px 51px;
  background: url("https://www.google.de/logos/2013/ella_fitzgeralds_96th_birthday-1212009-hp.jpg");
}

Habe mir erlaubt das Hintergrundbild von GOOGLE (Bild des Tages) zu nehmen.

$(document).ready(function() {
  $("#navigation ul li a").mouseover(function(){
        $(this).animate({"background-position": "-=50px"}, "slow");
  }).mouseout(function(){
         $(this).animate({"background-position": "+=50px"}, "slow");
  });
});

Check bitte, ob Dein Bildverzeichnis wirklich "Images" heißt - allein das ist schon ein Klapps auf die Finger wert.

Fazit: Bei mir läuft's ...

 

[Philipp88]

AW: Javascript animierte Navigation

Danke jetzt geht es
Aber wenn ich veranlassen will das er nur die y-achse verändern soll geht's wieder nicht

$(document).ready(function() {
  $("#navigation ul li a").mouseover(function(){
        $(this).animate({"background-position": "-43px 0"}, "slow");
  }).mouseout(function(){
         $(this).animate({"background-position": "+43px 0"}, "slow");
  });
});

 

[Duddle]

AW: Javascript animierte Navigation

Du hast den Artikel nicht komplett gelesen:

jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site).

Dieses PlugIn (und die im Artikel genutzte jQuery-Version) ist aber schon relativ alt und funktioniert (zumindest in meinen Tests) nicht mehr mit dem aktuellen jQuery. Google spuckt mir aber diese Antwort auf die Frage aus, wie man gescheit den Hintergrund animieren kann.

Dieser "Hook" macht genau das was du dir wünschst, auch wenn es nicht ganz so komfortabel wie ein kleines PlugIn ist. http://jsfiddle.net/PkP9F/5/


Duddle

 

[Philipp88]

AW: Javascript animierte Navigation

Vielen dank jetzt funktioniert es wie gewünscht
Muss jetzt noch nachvollziehen was das hook macht.
Vielen vielen dank nochmal