DIV ein-u. ausblenden mit JavaScript (jQuery)

[RonnyOld]

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:

<!--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

 

[SpiceLab]

Der toggle-Funktion fehlt eine "Wenn-Dann-Bedingung".

http://css-plus.com/2011/07/jquery-if-else-statements/

P.S. Bitte nutze die Code-Tags zur Quellcode-Präsentation: http://www.tutorials.de/help/bb-codes#codetag

 

[RonnyOld]

Hallo,
wenn es keine Umstände macht, wo muss die Wenn-Dann Bedingung gesetzt werden?
Ein kleiner Codeschipsel wäre sehr hilfreich .

Grusse RonnyOld

 

[SpiceLab]

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".

 

[Sempervivum]

Hallo Ronny,
ich frage mich, warum Du nicht einfach slideToggle verwendest, dann ist es viel einfacher und funktioniert einwandfrei:

$("a#slideFade").on("click", function () {
$("#player").slideToggle("slow");
});

Du musst allerdings das CSS des div auf display:none ändern.

 

[SpiceLab]

ich frage mich, warum Du nicht einfach slideToggle verwendest

Vermutlich aus Unwissenheit.

bin in Sachen JavaScript Anfänger.
Habe aus dem Net einen Code, welcher auch teilweise funktioniert .

 

[Jan-Frederik Stieler]

Hi,
oder damit das Div ohne JS sichtbar leibt durch JS auf display:none stellen.

$('#player').css({diplay: 'none'});

Grüße

 

[RonnyOld]

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).

<!--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