jQuery - Kreis Hover Effekt?

[Postpunker]

Hallo liebes Forum,

ich hätt da mal ne Frage, ob jemand vielleicht ein Script kennt,
um die Animation zu erstellen, die man bekommt, wenn man über Kreiselemente fährt.
Ich kanns nur versuchen zu erklären:
Also wenn man sich eine Box mit abgerundeten Ecken erstellt, mittels border-radius und sagen wir die hat dann die Farbe grün. Man hovert nun mit der Maus drüber und aus dem Zentrum bis zum Rand hin verändert sich die Farbe.
Also radial.

Hoffe ich konnt das irgendwie verständlich erklären.

Vielen Dank an jeden der mir irgendwie weiterhelfen kann.

 

[Fidelis_jpg]

AW: jQuery - Kreis Hover Effekt?

Hey,
ich denke ich habe verstanden was du meinst.
Den Kreis bekommt man wie du gesagt hast mit Hilfe eines DIVs und border-radius (= 0.5*div.width) schön hin.
Um den Effekt zu erhalten, müsstest du jetzt ein neues DIV erstellen und mit position:absolute direkt über den anderen Kreis legen. Also 2 DIVs übereinander.
Die jQuery Funktion, die du suchst, ist animate().
Der Code würde dann in etwa so aussehen:

CSS:

div.unten{
  border-radius:50px;
  width:100px;
  height:100px;
  background-color:#00FF00;
}
div.oben{
  border-radius:0px;
  width:0px;
  height:0px;
  background-color:#FF0000;
  position:absolute;
}

jQuery:

$("div.unten").hover(function(){
  $("body").append('<div></div>').addClass('oben');
  $("div.oben").animate({
    width: "100px",
    height: "100px",     
    border-radius: "50px",
  }, 500 );
});

Beim Klick auf das grüne DIV wird mit append() ein neues DIV erzeugt und die Klasse "oben" zugewiesen.
Mit animate() werden innerhalb von 500 Millisekunden die CSS-Werte gesetzt (/animiert), die in der Funktion angegeben sind.

Habe ich noch nicht getestet, sollte aber eigentlich funktionieren. Bei der Positionierung der Kreise musst du halt ein bisschen tüfteln.
Zur Not könnte man die genaue Position des unteren DIVs mit jQuery berechnen und dann die absoluten Werte für das obere DIV mit Hilfe von css() setzen. Alles ist möglich

Grüße, Fidelis

 

[Tr3icio]

AW: jQuery - Kreis Hover Effekt?

jQuery? Oo Viel zu veraltet.

Nimm eine CSS3 Animation.
Mit @(-moz-|-webkit-)keyframes kannst du eine Animation machen und diese später mit (-moz-|-webkit-)animation beim hover auslösen.

 

[simonpicos]

AW: jQuery - Kreis Hover Effekt?

Nimm eine CSS3 Animation.
Mit @(-moz-|-webkit-)keyframes kannst du eine Animation machen und diese später mit (-moz-|-webkit-)animation beim hover auslösen.

Jap, jQuery ist dafür nicht nötig. Das geht alles mit CSS. Allerdings braucht man keine Animation, sondern eine transition
Ich hab dir mal ein kleines Beispiel gebaut: http://dabblet.com/gist/2941388

Einzige Einschränkung: Nutzer mit veralteten Browsern sehen die Animation nicht, der Kreis verfärbt sich aber trotzdem.

 

[Fidelis_jpg]

AW: jQuery - Kreis Hover Effekt?

Dann viel Spaß im Internet Explorer
So sehr wir ihn auch alle hassen, aber wir müssen trotzdem browserübergreifend programmieren...

Das Beispiel auf dabblet.com funktioniert nicht in meinem IE 9.

Das ist halt jetzt die Frage: weniger, schöneren und neueren Code ODER die umständliche Variante, die dann halt überall funktioniert.

Die HTML-Verschachtelung von simonpicos ist auf jeden Fall die richtige!

edit:
http://jsfiddle.net/g9qzh/http://jsfiddle.net/k4PYt/
Hier noch mit jQuery, danach bleibt der Kreis auch grün
(Code geklaut von simonpicos )

 

[Tr3icio]

AW: jQuery - Kreis Hover Effekt?

Ich habe Animationen gesagt, weil ich nicht wusste ob Gradients genutzt werden. (Bei Gradients funktionieren Transitions in manchen Browsern nicht).
Außerdem ist der Unterschied zwischen Animation und Transition... nun ja 0 Transition = from-to Animation
^^

 

[Postpunker]

AW: jQuery - Kreis Hover Effekt?

Und was ist, wenn ich für meine Seite Chrome Frame benutze?
Ist der eigentlich automatisch auf meiner Seite aktiviert? Oder müssen das die Explorer Nutzer dann selbst aktivieren?
Ist dann die CSS Methode doch legitim? Oder wär jQuery dann doch besser?

 

[Postpunker]

AW: jQuery - Kreis Hover Effekt?

Und noch eine andere Frage. Habe mir das CSS Beispiel mal angeschaut. Wie schreibe ich da jetzt Text rein, der in der Mitte zentriert bleiben soll?

Vielen Dank! Habt mir schon sehr weitergeholfen!!! ^^

 

[Fidelis_jpg]

AW: jQuery - Kreis Hover Effekt?

Und noch eine andere Frage. Habe mir das CSS Beispiel mal angeschaut. Wie schreibe ich da jetzt Text rein, der in der Mitte zentriert bleiben soll?

Vielen Dank! Habt mir schon sehr weitergeholfen!!! ^^

Dafür kannst du folgendes verwenden:

<div class="outer">
    <div class="inner"></div>
    <div class="textbox">
        <div class="text">Das ist dein Text</div>
    </div>
<div>

und das CSS:

*{
    margin: 0;
    padding: 0;
}

.outer{
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius: 50%;
    position: relative;
}

.inner{
    width: 0px;
    height: 0px;
    position: absolute;
    z-index:1;
    top: 50%;
    left: 50%;
    background-color: green;
    border-radius: 50%;
    transition: linear 0.8s;
}

.outer:hover .inner, .textbox{
    width: 200px;
    height: 200px;
    top: 0px;
    left: 0px; 
}

.textbox{
    position:absolute;
    display:block;
    z-index:2;
}

.text{
    display:table-cell;
    width:200px;
    height:200px;
    vertical-align:middle;
    text-align:center;
}

Grüße, Fidelis

 

[Myhar]

AW: jQuery - Kreis Hover Effekt?

jQuery? Oo Viel zu veraltet.

Nimm eine CSS3 Animation.
Mit @(-moz-|-webkit-)keyframes kannst du eine Animation machen und diese später mit (-moz-|-webkit-)animation beim hover auslösen.

Nur -moz und -webkit? oO Viel zu veraltet.
Es gibt mehr Prefixes als -moz und -webkit. Bei Beispielen empfiehlt es sich außerdem, den Standard anzugeben. Ansonsten lernen die Leute es gleich falsch ein. Es gibt auch so schon genügend Seiten, welche nur -webkit verwendet und -o, -ms, -moz (und den eigentlichen, korrekten Standard) außen vor lassen.

 

[Postpunker]

AW: jQuery - Kreis Hover Effekt?

Wie ist denn der Standard in diesem Fall?

 

[Myhar]

AW: jQuery - Kreis Hover Effekt?

Deer Standard ist immer das hone die Präfixe. Am Beispiel von zB gradients erklärt (Trifft auf alle anderen Attribute auch zu):

-webkit-linear-gradient();
-moz-linear-gradient();
-ms-linear-gradient();
-o-linear-gradient();
linear-gradient()/*<--Der Standard*/

 

[simonpicos]

AW: jQuery - Kreis Hover Effekt?

Es gibt auch so schon genügend Seiten, welche nur -webkit verwendet und -o, -ms, -moz (und den eigentlichen, korrekten Standard) außen vor lassen.

Traurig ... :hmpf:

Ein kleiner halb-OT-beitrag zu den prefixen:

Wenn ich bei einem Projekt mit vielen CSS3-Eigenschaften, die prefixe benötigen, arbeite benutze ich zur Entwicklung diese Script:
Das generiert mir die ganzen prefixe automatisch, und ich muss nicht alles per Hand schreiben.
Am Ende lasse ich mir den CSS Code hiermit: http://prefixmycss.com/ komplett prefixen. Dann brauche ich das Script nicht mehr..

Nur so als kleiner Tipp