Antworten auf deine Fragen:
Neues Thema erstellen

jQuery - Kreis Hover Effekt?

Postpunker

Nicht mehr ganz neu hier

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

Aktives Mitglied

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:

Code:
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
 
Zuletzt bearbeitet:

Tr3icio

Nicht mehr ganz neu hier

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

Mod | Forum

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

Aktives Mitglied

AW: jQuery - Kreis Hover Effekt?

Dann viel Spaß im Internet Explorer :D
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 :D)
 
Zuletzt bearbeitet:

Tr3icio

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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?
 
Zuletzt bearbeitet:

Postpunker

Nicht mehr ganz neu hier

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

Aktives Mitglied

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:

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

und das CSS:

Code:
*{
    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

Hat es drauf

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.
 

Myhar

Hat es drauf

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):
Code:
-webkit-linear-gradient();
-moz-linear-gradient();
-ms-linear-gradient();
-o-linear-gradient();
linear-gradient()/*<--Der Standard*/
 

simonpicos

Mod | Forum

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 ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben