.toggle horizontal - von links nach rechts

.toggle horizontal - von links nach rechts | PSD-Tutorials.de

Erstellt von tscherd, 30.07.2018.

  1. tscherd

    tscherd Noch nicht viel geschrieben

    Dabei seit:
    10.05.2016
    Beiträge:
    3
    Geschlecht:
    weiblich
    .toggle horizontal - von links nach rechts
    hallo zusammen,

    folgender code in animate cc (html5-datei) führt bei mir zwar zu einem toggle, aber von oben links kommend, größer werdend bis zur Endgröße bzw. zurück.
    Der gleiche code bewirkt in einem HTML-Editor ein horizontales sliden. So soll es werden.

    $( this.buttoninstanz ).click(function() {
    $( "#komponenteninstanz" ).toggle ("slide");
    });

    Also ein klick auf einen button, soll die komponenteninstanz (ein foto) von links einschieben bzw. wieder nach links ausschieben.
    Ohne ... ("slide") erhalte ich ich beiden dateien (animate html5 und html-editor) den einfachen toggle, also einfaches sein und nicht-sein.

    Folgende jquery-dateien sind für beide html-dateien eingebunden:
    <link rel="stylesheet" href='jquery-ui.css'>
    <script src='jquery-1.12.4.js'></script>
    <script src='jquery-ui.js'></script>
    Die dateien liegen im passenden ordner lokal auf dem rechner, damit sie schneller bereit stehen. ...

    meine beste alternative horizontale Lösung sieht so aus ...
    $( this.buttoninstanz ).click(function() {
    $( "#komponenteninstanz" ).animate({ width: "toggle" },500);
    $( "#komponenteninstanz" ).show();
    });
    ... allerdings wird die komponenteninstanz (foto) nicht von außen eingeschoben, sondern die width wird maximiert und wieder auf 0 gesetzt, wodurch das foto verzerrt eingeblendet bzw. ausgeblendet wird. Unschön.

    Hat jemand eine bessere Lösung zum horizontalen toggle in animate?




    P.S.: Komme mir vor wie im turmspringen ... der einfache toggle ... ;-)
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

Seobility SEO Tool
x
×
×