relativ simpel, man sollte nur die doku dazu lesen
bei hover kann optional ein zweiter parameter angegeben werden ...

.hover( handlerIn(eventObject),handlerOut(eventObject) )

api.jquery.com/hover/

und im CSS die Transitions eintragen. Wofür jQuery?

Wofür Javascript
Einfach das element:hover event von CSS verwenden...

Meine güte, ist Google heute so schwer zugänglich:


Das kommt in das css von dem div rein.

Dann mach eben die Animation schneller.
Nehm doch mal anstatt ".6s" einfach ".2s".

Wo um gottes willen hast du denn die Transition reingetan?
Die Transition soll in das Div rein, nicht in das hover event.

Und vergiss nicht, dass -webkit- nur in Webkit-Browsern funktioniert. Füg diese Zeile mit -moz-, -o-, -webkit- und mal ohne Präfix ein, in der Reihenfolge, dann gehts auch.

Aber hinter der Zeile mit -webkit- kommt ja noch der Rest

So gehts richtig, für alle Browser.

Und wo ist der Unterschied? Dass das da zuerst -moz- und -o- kommen? Die Reihenfolge ist doch komplett egal

BTT:

Schau dir auch mal das hier an, sieht schöner aus und ist auch schneller als mit Jquery: Aufklappeffekt mit CSS3 und Javascript

mimimimimimimmi, lass die leute es doch so machen wie sie wollen....
und samus hat wohl mehr in sachen webentwicklung gemacht wie du

Spammst du jetzt jeden Thread voll in dem ich schreibe?

Say Hallo to your Verwarnung...

Die Reihenfolge ist nicht egal, da die CSS-Eigenschaften immer der Reihenfolge nach angewendet werden. Wenn ein zukünftiger Browser also die "reine", vllt. bessere transition-Eigenschaft unterstützt, du ihm aber als letzte Eigenschaft die -moz-Eigenschaft lieferst, die nicht alle Features der neuen Implementierung besitzt, ists fürn Popo.
Außerdem sind alphabetisch angeordnete Eigenschaften innerhalb eines Selektors besser lesbar. Ich kann allen hier procssor.com/ empfehlen.

Edit: Was soll der Rand da überhaupt machen?

Die Transition soll Verdammt noch mal da rein: .navbutton {