DIV ein-u. ausblenden mit JavaScript (jQuery)

RonnyOld

Grünschnabel
Hallo werte Forengemeinschaft,
bin in Sachen JavaScript Anfänger.
Habe aus dem Net einen Code, welcher auch teilweise funktioniert :(.

Habe ein DIV (#player), welches durch ein Link <a href="#" id="slideFade">Player Info ▼ ▲</a> ein-und ausgeblendet werden soll.
Das DIV (#player) ist im css-style visibility: hidden; damit es beim Laden der Seite unsichtbar ist.

Funktion:
Javascript:
<!--Playerinfo ein-u. ausblenden-->
<script type="text/javascript">
$(document).ready(function(){
  $("a#slideFade").toggle(function(){
  $("#player").css("visibility","visible");
  $("#player").animate({ height: 'hide', opacity: 'show' }, 'slow');
  },function(){
  $("#player").animate({ height: 'show', opacity: 'hide' }, 'slow');
  })
  });
  </script>
Soweit funktioniert auch alles, aber wenn ich den Link klicke, dann wird das DIV kurz sichtbar und ausgeblendet (eingescrollt). Kann mir jemand einen Tipp geben was am Code falsch ist ;).

Grusse RonnyOld
 
Zuletzt bearbeitet von einem Moderator:
Hallo,
wenn es keine Umstände macht, wo muss die Wenn-Dann Bedingung gesetzt werden?
Ein kleiner Codeschipsel wäre sehr hilfreich ;).

Grusse RonnyOld
 
Wenn es keine Umstände macht, schau dir einfach mal die leicht überschaubaren Code-Beispiele der genannten Seite genauer an.

Frei nach dem Motto: "learning by doing".
 
Hallo Ronny,
ich frage mich, warum Du nicht einfach slideToggle verwendest, dann ist es viel einfacher und funktioniert einwandfrei:
Code:
$("a#slideFade").on("click", function () {
$("#player").slideToggle("slow");
});
Du musst allerdings das CSS des div auf display:none ändern.
 
Hallo,
vielen Dank für das rege Interesse einem Nooby, der auch is willing to learn ;), zu helfen.
Der Code-Schnipsel von Sempervivum funktioniert prima und sicher gibt es auch noch andere Lösungsansätze (SpiceLab).
Javascript:
<!--Playerinfo ein-u. ausblenden-->
<script type="text/javascript">
$(document).ready(function(){
  $("#player").css("visibility","visible");
  $("a#slideFade").on("click", function () {
  $("#player").slideToggle("slow");
  });
  });
  </script>


Grusse Ronny
 
Zurück