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

Brauche Hilfe bei einem Animations Script !

K

kwkurzer

New member
Schönen guten Abend,

mochte gern 2 Div Container mit jeweils einem darüber liegenden Button so animieren wie in folgenden Beispiel:

Yoga Arts | Ashtanga Yoga Essen

Beim Klick auf Willkommen verschwindet der Inhalt und der Button bewegt sich zu Unterseite des Bildschirms.

Vielen Dank schon mal für euere Hilfe.
 
Diente ja nur als Beispiel.

Nun hier eine simple variante. Habe Probleme mit bottom="0" da bei einer Überfüllung der Divs der scrollbar nicht mehr angezeigt wird.

HTML: 
<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
	<script src='js/jquery-1.10.2.min.js' type='text/javascript'></script>
	<script src='js/custom.js' type='text/javascript'></script>
    
<style type="text/css">
body {
	margin: 0;
	background-color: #09F;
}
.container {
	width: 100%;
	height: 100%;
	padding:;
	position: inherit;
}
.left {
	width: 400px;
	margin-left: 100px;
	margin-top: 200px;
	padding:;
	float: left;
	bottom: 0;
	position: absolute;
}
.right {
	width: 300px;
	margin-left: 520px;
	padding:;
	bottom: 0;
	position: absolute;
}
.button {
	width: 100%;
	margin:;
	padding:;
}
.button:hover {
	cursor: pointer;
}
.article {
	width: 100%;
	margin:;
	padding:;
}
.blue {
	background-color: #03F;
}
.red {
	background-color: #F90;
}
.yellow {
	background-color: #FF9;
}
.left p, .right p, .button p, .article p {
	margin: 0;
	padding: 0;
}
</style>
</head>

<body>

<div class="container">

	<div class="left">
   	  <div class="button yellow" id="buttonleft">Willkommen</div>
        <div class="article blue" id="attikelleft">
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
          <p>Yoga wird für alle Lebenslagen angeboten. Die meisten Menschen haben   inzwischen eine Ahnung was Yoga ist. Für einige ist es eher eine   Entspannungshilfe, für andere ein Sportprogramm. Tatsächlich lassen sich   Yogaübungen für beides nutzen, aber Yoga ist mehr.</p>
      </div>
	</div>
    
    <div class="right">
		<div class="button yellow" id="buttonright">News</div>
		<div class="article red" id="attikelright">Stöbern Sie einfach durch diese Seiten und stellen sich Ihr   individuelles Praxis-Programm zusammen. Einstieg in die laufenden Kurse   ist jederzeit möglich!</div>
    </div>
    
</div>

</body>
</html>

Code: 
$(document).ready(function(){
  $("#buttonleft").click(function(){
	$("#attikelleft").animate({height:'toggle'});
  });
  $("#buttonright").click(function(){
	$("#attikelright").animate({height:'toggle'});
  });
});
Der Div Container "Left" soll bei Überfüllung den Scollbar trotz botton="0" anzeigen.
Wie kann ich dies realisieren?
 
Zuletzt bearbeitet von einem Moderator:
Dein Beitrag musste erst noch freigeschaltet werden, ist ein Bug in der Forensoftware. Bitte nächstes Mal nicht einfach einen neuen Thread erstellen, sondern ein wenig warten, sollte das Problem nochmal auftreten.

Zum Thema:
Schau mal hier: slide down / expand via CSS transition - JSFiddle

PS: das Menü der Website ist kaputt, da am unteren Bildschirmrand abgeschnitten und nicht scrollbar
PPS: also als Nutzer hätte ich die Website längst wieder verlassen, bevor sie fertig geladen ist. Das Laden hat mindestens eine viertel Minute(!) gedauert - unter DSL 16000...
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben