Antworten auf deine Fragen:
Neues Thema erstellen

[jQuery] Borderradius animieren

Fugel

rebmeM

PSD Beta Team
Hallo Leute,

ich versuche gerade eine Animation zu erstellen, die aus einem Div, das bei Start noch ein Kreis ist ein Rechteck macht. Das ganze geht vom Prinzip her auch, nur wird der Wandel von runder zu eckiger Ecke nicht animiert, sondern ist sofort da. Ich hab jetzt schon gelesen, dass es nicht möglich ist mit animate genau das zu machen. Leider finde ich aber auch keine Alternative.

Hat von euch jemand eine Idee?

Wichtig ist noch folgendes:

Die ganze Animation muss gleichzeitig ablaufen und schaut wie folgt aus:

Kreis (Position ist die untere rechte Ecke) bewegt sich nach links oben, wird um einiges größer und verwandelt sich in ein Rechteck.

Ich hoffe man kann mir folgen, bin leider kein guter Erklärer xD
 

Fugel

rebmeM

PSD Beta Team
Hallo cebito,

danke für deine Antwort. Hier mal ein Link zu einer abgespeckten version des ganzen: https://jsfiddle.net/8wx0h5cu/3/

Zu deinem Vorschlag mit dem CSS3...die Idee hatte ich auch schon, nur unterstützen das nur die ganz modernen Browser. Oder sehe ich das falsch?
 

Aelfry

Web Developer

Zu deinem Vorschlag mit dem CSS3...die Idee hatte ich auch schon, nur unterstützen das nur die ganz modernen Browser. Oder sehe ich das falsch?
Was heißt nur "ganz morderne"... die "guten" Browser (Chrome, FF etc.) auch in der nicht ganz aktuellen Version und selbst der IE unterstützt das bis runter zum IE10.
Wer einen älteren IE nutzt, sieht dann halt den Wechsel hart ohne Animation - imo verschmerzbar (natürlich abhängig von der Zielgruppe)

BTW: border-radius ist ebenfalls CSS3, sprich ganz alte Browser (<IE9) hätten selbst wenn du eine jQuery Lösung erstellst, Probleme

Ich würde es also, wie von cebito vorgeschlagen, komplett mit CSS3 lösen, also in der Form:
HTML:
#galleryContainer:hover {
    height: 500px;
    width: 500px;
    right: -250px;
    bottom: -250px;
    background: #fff;
    border-radius: 0;
}
 

Fugel

rebmeM

PSD Beta Team
Grüße,

Du hast schon recht mit deiner Antwort, hab es jetzt auch schon so gelöst. Eine andere Möglichkeit scheint es eh nicht zu geben, also was soll's.

Danke für eure Antworten.
 

Enigmon

Nicht mehr ganz neu hier

Hier mal ein Ansatz:
Es geht sicherlich noch viel besser, aber es ist ein Ansatz denke ich.
Getestet mit:
Firefox 36.0.4
Chrome 41
Vivaldi
IE 9 (hier springt er von Pos. a nach b und macht keine Animation)

Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Div bewegen</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var status = 0;
       
            $('#mover').click(function(){
                if(status==0){
                    changePosition($(this), "400px", "5px", "-540px", "-200px", "zurück");
                    status=1;
                }else{
                    changePosition($(this), "100px","50px", "0px", "0px", "vor");
                    status=0;
                }
            });
       
            function changePosition(element, divWidth, divRadius, divLeft, divTop, divContent){
                $(element).html(divContent);
           
                $(element).css('width',divWidth);
                $(element).css('border-radius',divRadius);
               
                $(element).css('-webkit-transition', '0.5s ease-in');
                $(element).css('-moz-transition', '0.5s ease-in');
                $(element).css('-o-transition', '0.5s ease-in');
                $(element).css('transition', '0.5s ease-in');
               
                $(element).css('-webkit-transform', 'translate('+divLeft+','+divTop+')');
                $(element).css('-moz-transform', 'translate('+divLeft+','+divTop+')');
                $(element).css('-o-transform', 'translate('+divLeft+','+divTop+')');
                $(element).css('-ms-transform', 'translate('+divLeft+','+divTop+')');
                $(element).css('transform', 'translate('+divLeft+','+divTop+')');
            };
        });
    </script>
    <style>
        #content{
            width: 90%;
            height: 500px;
            border: 1px solid black;
        }
        #mover{
            position: absolute;
            top: 400px;
            left: 1000px;
            border: 1px solid blue;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            transition: transform 1s;
            text-align: center;
        }
   
    </style>
</head>
<body>
    <div id="wrapper">
        <header></header>
        <nav></nav>
        <div id="content">
            <div id="mover">vor</div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

LG
Thomas
 
Zuletzt bearbeitet:

Aelfry

Web Developer

Du hast schon recht mit deiner Antwort, hab es jetzt auch schon so gelöst. Eine andere Möglichkeit scheint es eh nicht zu geben, also was soll's.
Möglich ist es mit JS schon, nur eben nicht der schönste Weg.

Es läuft halt auf Workarounds raus, führt evtl. bei anderen Browser trotzdem zu Problemen und zwingt dich etliche Plugin zu laden.
Da du z. B. auch die Hintergrund Farbe animieren willst, muss du hierfür ein entsprechendes Plugin mit laden (z. B. jquery UI).

Ich würde es wie gesagt mit CSS3 machen - dürfte die sauberste Lösung sein (auch im Hinblick auf Performance).

Aber nur um dir zu zeigen, wie die jquery Lösung in deinem Beispiel aussehen kann:
https://jsfiddle.net/majorzod/ux4a3kdh/
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben