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

[FRAGE] DIV langsam einblenden

J

jasmin2102

New member
Hallo liebes Forum Team,

ich habe eine sicherlich simpel zu lösende Aufgabe, aber ich komme einfach nicht auf die Antwort.

Ich lasse Elemente via Javascript ein- und ausblenden. Nun möchte ich, dass diese nicht schnell, sondern langsam eingeblendet werden. Leider weiß ich einfach nicht wie ich das einbaue, obwohl es sicher nur eine kleine Zeile ist.

Vielen Dank im Voraus für Eure Hilfe!!!
Nadja

HTML: 
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script language="JavaScript" type="text/javascript">
<!--
function einblenden(div) {
with(document.getElementById(div).style){
if(display=="none"){
display="inline";
}
else{
display="none";
}
}
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function ausblenden(div) {
with(document.getElementById(div).style){
if(display=="none"){
display="none";
}
else{
display="none";
}
}
}
//-->
</script>

<style>
.referenzen {
width:1100px;
margin: 0 auto;
}

.referenzen_text {
width:1100px;
margin: 0 auto;
}
</style>

</head>

<body>

<div class="referenzen">
<a href="#" onClick="einblenden('div1'); ausblenden('div2'); ausblenden('div3'); return false;">Link</a>
<a href="#" onClick="einblenden('div2'); ausblenden('div1'); ausblenden('div3'); return false;">Link</a>
<a href="#" onClick="einblenden('div3'); ausblenden('div1'); ausblenden('div2'); return false;">Link</a>
</div>

<div class="referenzen_text">
<div id="div1" style="display:none;">
bla bla
</div>
<div id="div2" style="display:none;">
test
</div>

<div id="div3" style="display:none;">
hell
</div>
</div>



</body>
</html>
 
Hallo rico! Danke für den Tipp.

Ich bin jetzt schon ein Stück weiter! Jetzt fehlt mir eigentlich nur noch, dass wenn ich auf das erste Bild geklickt habe und ich danach auf das zweite Bild klicke, dass dann der Text unter dem ersten Bild verschwindet. Heißt wenn ein <div> Bereich geöffnet ist, sollen sich alle anderen schließen.

Vielen Dank im Voraus!


HTML: 
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <title>slideDown demo</title>
<style>


.referenz1, .referenz2, .referenz3 {
  display: none;
}
</style>

</head>
<body>

<img id="referenz1bild" src="http://www.hd-gbpics.de/gbbilder/lustige-tiere/001.jpg"/>
<img id="referenz2bild" src="http://www.hd-gbpics.de/gbbilder/lustige-tiere/001.jpg"/>
<img id="referenz3bild" src="http://www.hd-gbpics.de/gbbilder/lustige-tiere/001.jpg"/>

<div class="referenz1">test1</div>
<div class="referenz2">test2</div>
<div class="referenz3">test3</div>


<script>
$(document.getElementById("referenz1bild")).click(function () {
  if ( $( ".referenz1:first" ).is( ":hidden" ) ) {
    $( ".referenz1" ).slideDown( "slow" );
  } else {
    $( ".referenz1" ).hide();
  }
});
</script>

<script>
$(document.getElementById("referenz2bild")).click(function () {
  if ( $( ".referenz2:first" ).is( ":hidden" ) ) {
    $( ".referenz2" ).slideDown( "slow" );
  } else {
    $( ".referenz2" ).hide();
  }
});
</script>

<script>
$(document.getElementById("referenz3bild")).click(function () {
  if ( $( ".referenz3:first" ).is( ":hidden" ) ) {
    $( ".referenz3" ).slideDown( "slow" );
  } else {
    $( ".referenz3" ).hide();
  }
});
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben