Ergebnis 1 bis 6 von 6
  1. #1
    newbee79 ist offline Grünschnabel
    registriert
    28-09-2016
    Beiträge
    3

    Question Funktion animieren

    Hi zusammen

    Muß jetzt einfach meine Frage mal hier stellen, weil ich einfach nicht weiterkomme.

    Benutze schon lange dieses Script, ich hätte aber gerne eine kleine Animation z.B. Fade beim Ein- bzw. Ausblenden.

    Code:
    <script> 
    function show(id) { 
        if(document.getElementById) { 
            var mydiv = document.getElementById(id); 
            mydiv.style.display = (mydiv.style.display=='block'?'none':'block'); 
        } 
    } 
    </script> 
    <a href="" onclick="javascript:show('divText'); return false"> 
    Einblenden / Ausblenden</a> 
    <div style="display: none" id="divText">Text</div>
    Habe auch schon zig Scripts gefunden, wo das geht, allerdings muß man da meist die IDs schon im Script selbst vergeben, und das möchte ich nicht.

    Das finde ich an dem Mini-Script prima, dass ich eigene Div's im HTML-Teil vergeben kann.

    Kann mir jemand helfen?

    Schon mal vielen Dank im Voraus

    LG David

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: Funktion animieren

    Zitat Zitat von newbee79 Beitrag anzeigen
    ich hätte aber gerne eine kleine Animation z.B. Fade beim Ein- bzw. Ausblenden.
    .fadeIn() | jQuery API Documentation

    Code:
    <a href="" onclick="javascript:show('divText'); return false">
    wenn du das href nicht benötigst, lass es weg
    javascript: hat da nichts zu suchen

    Zitat Zitat von newbee79 Beitrag anzeigen
    Habe auch schon zig Scripts gefunden, wo das geht, allerdings muß man da meist die IDs schon im Script selbst vergeben, und das möchte ich nicht.
    prinzipiell kannst du jeden js eventhandler in das html auslagern.
    machen sollte man das aber nicht

    Zitat Zitat von newbee79 Beitrag anzeigen
    Das finde ich an dem Mini-Script prima, dass ich eigene Div's im HTML-Teil vergeben kann.
    zeig mal ein beispiel wo das nicht gehen soll.

  3. #3
    newbee79 ist offline Grünschnabel
    registriert
    28-09-2016
    Beiträge
    3

    AW: Funktion animieren

    Also href benötige ich… brauche ja einen Link auf den ich klicken kann, damit sich das div ein- bzw. ausblendet ( Klick auf einen Link, dann geht die Navi auf ).

    Ich habe das script in eine general.js ausgelagert. Und in den html Seiten rufe ich die Funktion auf, wie in dem Beispiel.

    Aber wo baue ich jetzt das FadeIn ein ?

    Sorry, bin Grafiker im Printbereich, kenne mich mit hmtl und css einigermaßen aus, aber nicht mit js…

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: Funktion animieren

    Zitat Zitat von newbee79 Beitrag anzeigen
    Also href benötige ich… brauche ja einen Link auf den ich klicken kann, damit sich das div ein- bzw. ausblendet ( Klick auf einen Link, dann geht die Navi auf ).
    eigentlich brauchst du einen button, weil es ja kein link ist, sondern etwas auf das du klicken kannst und daraufhin eine aktion ausgeführt wird, ein button eben. aber wenn du ein a-element nutzt, welches nicht auf eine uri zeigt, lass das href weg
    https://www.w3.org/TR/html5/links.ht...hyperlink-href

    Zitat Zitat von newbee79 Beitrag anzeigen
    Ich habe das script in eine general.js ausgelagert. Und in den html Seiten rufe ich die Funktion auf, wie in dem Beispiel.
    was hast du in general.js ausgelagert und welche funktion wie aufgerufen?

    Zitat Zitat von newbee79 Beitrag anzeigen
    Aber wo baue ich jetzt das FadeIn ein ?
    du lädst jquery.js runter oder bindest es über ein cdn ein
    gibst deinem a eine id oder etwas anderes über das man es eindeutig identifizieren kann
    und in deinem js schreibst du dann
    Code:
    <script>
    $("<<selector>>").click(function()
    {
      $("#divText").fadeIn("slow");
    });
    </script>
    wobei "<<selector>>" entweder deine id des a-elementes ist "#id" oder über eine klasse ".class" oder ...

  5. #5
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    213

    AW: Funktion animieren

    Zitat Zitat von newbee79 Beitrag anzeigen
    Sorry, bin Grafiker im Printbereich, kenne mich mit hmtl und css einigermaßen aus, aber nicht mit js…
    Is doch super da kannst du schon 2/3 deines Projektes selber lösen.
    Du musst nur eine css-transition schreiben am besten auf opacity.
    und deine Function auf opacity prüfen. Und du brauchst für die paar Aktionen kein 250k Jquery laden .
    HTML-Code:
    <!DOCTYPE html>
    
    <html lang="en">
    	<head>
    		<meta charset="UTF-8" />
    		<meta name="description" content=""/>
    		<meta name="keywords" content=""/>
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    		<title></title>
    		
    		<style type="text/css">
    		body {text-align:center;}
                     ul li{cursor:pointer; list-style:none;}
    		.fade{opacity:0; transition:opacity 0.4s ease 0s; display:block!important; }
    		</style>
    	</head>
    	<body>
    
    </div>			
    <a href="" onclick="javascript:show('divText'); return false"> Einblenden / Ausblenden</a> 
    
    <ul>   <li onclick="javascript:show('divText');" > mit Listelement ein aus Faden  </li>  </ul>
    
    <div class="fade" id="divText" style="display:none";>Text</div>	
    
    <script> 
    
    function show(id) { 
        if(document.getElementById) { 
            var mydiv = document.getElementById(id); 
            mydiv.style.opacity = (mydiv.style.opacity=='1'?'0':'1'); 
        } 
    } 
    </script> 
    	
    	</body>
    </html>
    Geändert von andreax (28-09-2016 um 23:36 Uhr)

  6. #6
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: Funktion animieren

    kopier doch bitte nicht den grauenhaften code mit den fehlern die ich schon angesprochen habe

    Zitat Zitat von andreax Beitrag anzeigen
    Is doch super da kannst du schon 2/3 deines Projektes selber lösen.
    das lässt sich auf 100% css erhöhen indem du eine (unsichtbare) checkbox nutzt um den state zu speichern

Ähnliche Themen

  1. [FRAGE] DIV in einer Tabellenzelle animieren
    Von FabianScho im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 06-07-2016, 09:52
  2. Mit Javascript DIV erstellen und Animieren
    Von kurt001 im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 15-06-2011, 23:27
  3. Navigationsleite Animieren
    Von new_developer im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 29-04-2010, 15:23
  4. Iframe per Javascript animieren
    Von Störtebecker im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 14-05-2009, 19:51
  5. Slotmaschine animieren?
    Von General1983 im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 26-12-2007, 13:26

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •