mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 19:30 Benutzername: Passwort: Auto-Login

Thema: Sanfte Übergänge beim Öffnen eines DIVs vom 05.08.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Sanfte Übergänge beim Öffnen eines DIVs
Autor Nachricht
oakland-8
Threadersteller

Dabei seit: 26.01.2007
Ort: unten - schräg rechts
Alter: -
Geschlecht: Männlich
Verfasst Di 05.08.2014 14:04
Titel

Sanfte Übergänge beim Öffnen eines DIVs

 Antworten mit Zitat Zum Seitenanfang
Hallo allerseits,
folgende Sache bekomme ich nicht gelöst:
Ich habe einen Link, über den ich einen neuen DIV öffne. Den Übergang möchte ich aber etwas "geschmeidig" gestalten.
Ist da JavaScript die richtige Sache oder kann ich es per CSS bewerstelligen? Mit dem Thema transition habe ich mich beschäftigt, aber das scheint nicht die richtige Lösung zu sein.
Wäre für eine kurze Wortmeldung sehr dankbar...
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Di 05.08.2014 14:28
Titel

Antworten mit Zitat Zum Seitenanfang
Zeig doch mal was du bisher geschafft hast?
JavaScript ist dafür im Normalfall wirklich nicht nötig.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
oakland-8
Threadersteller

Dabei seit: 26.01.2007
Ort: unten - schräg rechts
Alter: -
Geschlecht: Männlich
Verfasst Mi 06.08.2014 11:13
Titel

Antworten mit Zitat Zum Seitenanfang
So, da isses:

Code:
<div id="nav"><a href="#" onmouseover="toggle('info1')">PROJEKTE</a> &nbsp;| &nbsp;<a href="#" onmouseover="toggle('info2')">LEISTUNGEN</a> &nbsp;| &nbsp;<a href="#" onmouseover="toggle('info3')">KONTAKT</a>
  </div>
 
  <div id="info1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
  </div>


CSS
Code:
#nav {
   height: 2em;
   border: #333 0.5em solid;
   text-align: left;
   font-family: 'Raleway', sans-serif;
   padding: 14px 0 0 42px;
   margin: 2em auto 2em;
   background-color: #FFF;
   -moz-box-shadow: 0 0 8px black;
   -webkit-box-shadow: 0 0 8px black;
   box-shadow: 0 0 8px black;
   color: #FFF;
   background-image: -webkit-linear-gradient(#fc3 0%, #e3ab04 100%);
   background-image: -moz-linear-gradient(#fc3 0%, #e3ab04 100%);
   background-image: -o-linear-gradient(#fc3 0%, #e3ab04 100%);
   background-image: linear-gradient(#fc3 0%, #e3ab04 100%);
}

#info1 {
   display: none;
   height: 9em;
   border: #333 0.5em solid;
   text-align: left;
   font-family: 'Raleway', sans-serif;
   color: #06C;
   padding: 18px 0 0 42px;
   margin: 2em auto 2em;
   background-color: #FFF;
   -moz-box-shadow: 0 0 8px black;
   -webkit-box-shadow: 0 0 8px black;
   box-shadow: 0 0 8px black;
}


JavaScript (head-Bereich)
Code:
<script type="text/javascript">
function toggle(id) {
        if (document.getElementById(id).style.display != 'block'){
          document.getElementById(id).style.display = 'block';
        } else {
          document.getElementById(id).style.display = 'none';
        }
      }
</script>


Der Link im Div #nav öffnet den Div #info1.
Wie krieg ich hin, dass sich das Ganze etwas sanfter vollzieht?
  View user's profile Private Nachricht senden
oakland-8
Threadersteller

Dabei seit: 26.01.2007
Ort: unten - schräg rechts
Alter: -
Geschlecht: Männlich
Verfasst Di 12.08.2014 11:37
Titel

andere Möglichkeit

 Antworten mit Zitat Zum Seitenanfang
Ich habe leider keine Lösung gefunden, das Problem aber mit einer anderen Möglichkeit umgangen:
Superfish-Menü (mit der kleinen Änderung "superclick"). Per Klick öffnet sich nicht ein neues Div, sondern eben besagtes Menü. Ist halt etwas Anderes, aber erfüllt seinen Zweck (in meinem Fall).

Zuletzt bearbeitet von oakland-8 am Di 12.08.2014 11:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Tapulator

Dabei seit: 05.09.2014
Ort: Ruhrpott
Alter: 44
Geschlecht: Männlich
Verfasst Fr 05.09.2014 04:05
Titel

Antworten mit Zitat Zum Seitenanfang
Damit du beim nächsten Mal keinen Workaround erarbeiten musst: Ein weiches Ein- und Ausblenden kannst du z.B. mit den zahlreichen Effekten des JavaScript-Frameworks jQuery einfach umsetzen.
  View user's profile Private Nachricht senden
oakland-8
Threadersteller

Dabei seit: 26.01.2007
Ort: unten - schräg rechts
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.09.2014 10:23
Titel

Antworten mit Zitat Zum Seitenanfang
Besten Dank für den Tipp.
Die Sachen sind mir ein Begriff, aber zukünftig muss ich mich wohl näher damit beschäftigen.
  View user's profile Private Nachricht senden
 
Ähnliche Themen flash: übergänge
Übergänge der Site's
PowerPoint Bild-Übergänge
Illustrator - wie weiche Übergänge schaffen?
Nichtlineare Bilderfading bzw. Übergänge in Photoshop?
DIVs "öffnen" und "schließen"
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB