• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Funktion animieren

N

newbee79

New member
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 :D

LG David
 
newbee79 schrieb:
ich hätte aber gerne eine kleine Animation z.B. Fade beim Ein- bzw. Ausblenden.
Zum Vergrößern anklicken....
.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

newbee79 schrieb:
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.
Zum Vergrößern anklicken....
prinzipiell kannst du jeden js eventhandler in das html auslagern.
machen sollte man das aber nicht

newbee79 schrieb:
Das finde ich an dem Mini-Script prima, dass ich eigene Div's im HTML-Teil vergeben kann.
Zum Vergrößern anklicken....
zeig mal ein beispiel wo das nicht gehen soll.
 
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…
 
newbee79 schrieb:
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 ).
Zum Vergrößern anklicken....
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.html#attr-hyperlink-href

newbee79 schrieb:
Ich habe das script in eine general.js ausgelagert. Und in den html Seiten rufe ich die Funktion auf, wie in dem Beispiel.
Zum Vergrößern anklicken....
was hast du in general.js ausgelagert und welche funktion wie aufgerufen?

newbee79 schrieb:
Aber wo baue ich jetzt das FadeIn ein ?
Zum Vergrößern anklicken....
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 ...
 
newbee79 schrieb:
Sorry, bin Grafiker im Printbereich, kenne mich mit hmtl und css einigermaßen aus, aber nicht mit js…
Zum Vergrößern anklicken....
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: 
<!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>
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben