jQuery - Slide-Effekt mit einem Link bzw. Button

bj-lover

bj-lover

Grünschnabel
hallo,
ich habe auf dieser seite gefunden was ich brauche nur hat dieser code ein haken, er hat jeweils ein show und ein hide button.
ich möchte gerne nur einen button haben, wo ich drauf klicken kann un es sich entweder öffnen wenns zu ist bzw. schließt wenn das div offen ist.

Ich hoffe es war einigermaßen verständlich von mir geschrieben. Da ich nich viel ahnung von jQuery habe, hoffe ich auf schnelle hilfe.... (bitte die lösung jeweils in html un in js teilen wie ich hier.

Quelle:
  1. http://www.andreas-schlapsi.at/2008/11/09/jquery-effektvoll-ein-und-ausblenden/comment-page-1/
  2. http://www.andreas-schlapsi.at/wp-content/uploads/2008/11/jquery_04-4_slide.html

Aso, wichtig: Ich möchte nich 6 Divs animieren sondern wirklich nur einen. Ein Button/Link für ein Div zu auf un zu machen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>jQuery 04 - Show und Hide</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery_04-1_show_hide.js" type="text/javascript"></script>
    <style type="text/css">
      div { width: 100px; height: 100px; background-color: yellow; border: 1px solid #000; }
    </style>
  </head>
  <body>
    <input id="hideButton" type="button" value="hide" />
    <input id="showButton" type="button" value="show" />
    <div id="div1" style="position: absolute; left: 10px; top: 60px">speed: "slow"</div>
    <div id="div2" style="position: absolute; left: 160px; top: 60px">speed: "normal"</div>
    <div id="div3" style="position: absolute; left: 310px; top: 60px">speed: "fast"</div>
    <div id="div4" style="position: absolute; left: 10px; top: 210px">speed: 600</div>
    <div id="div5" style="position: absolute; left: 160px; top: 210px">speed: 400</div>
    <div id="div6" style="position: absolute; left: 310px; top: 210px">speed: 200</div>
  </body>
</html>

PHP: 
$(document).ready(function() {
  $("#hideButton").click(function() {
    $("#div1").slideUp("slow", function() {
      $("#div2").slideUp("normal", function() {
        $("#div3").slideUp("fast");
      });
    });
    $("#div4").slideUp(600, function() {
      $("#div5").slideUp(400, function() {
        $("#div6").slideUp(200);
      });
    });
  });
  $("#showButton").click(function() {
    $("#div1").slideDown("slow");
    $("#div2").slideDown("normal");
    $("#div3").slideDown("fast");
    $("#div4").slideDown(600);
    $("#div5").slideDown(400);
    $("#div6").slideDown(200);
  });
});
 
Setz mal bei dem show-Button nen style="display: none;".

Und dann den JS-Code:

Code: 
$(document).ready(function() {
  $("#hideButton").click(function() {
   $("#hideButton").hide();
    $("#showButton").show();
    $("#div1").slideUp("slow", function() {
      $("#div2").slideUp("normal", function() {
        $("#div3").slideUp("fast");
      });
    });
    $("#div4").slideUp(600, function() {
      $("#div5").slideUp(400, function() {
        $("#div6").slideUp(200);
      });
    });
  });
  $("#showButton").click(function() {
    $("#showButton").hide();
    $("#hideButton").show();
    $("#div1").slideDown("slow");
    $("#div2").slideDown("normal");
    $("#div3").slideDown("fast");
    $("#div4").slideDown(600);
    $("#div5").slideDown(400);
    $("#div6").slideDown(200);
  });
});
 
Zuletzt bearbeitet:
Vielen Danke erstmal an dich tsbmusic.
... hat super geklappt. habe aber noch eine kleinigkeit. jezz is das div schon auf, ich möchte aber, dass des div nicht im vorein auf ist sondern zu wenn man auf meine seite kommt. :)

ps: gibt es auch die möglichkeit statt ein input einfach einen link zu machen ?

ich sage schon mal danke!
 
Zuletzt bearbeitet:
Dann versteckst du eben dieses <div> per display:none.

Und den Formular-Button ersetzt du durch deinen gewünschten Link, und gibst diesem die ID mit auf den Weg.

HTML: 
<a href="#" id="hideButton">hide</a>
<a href="#" id="showButton">show</a>
 
Hi,

und nicht vergessen, das Standardereignis des Links zu unterbinden (preventDefault).

Das Ganze ist auch mit nur einem einzigen Button/Link realisierbar.
Code: 
  $("#showButton").click(function(evt){
    evt.preventDefault();
    if($('#div1').is(':hidden')){
      $("#div1").slideDown("slow");
      $("#div2").slideDown("normal");
      $("#div3").slideDown("fast");
      $("#div4").slideDown(600);
      $("#div5").slideDown(400);
      $("#div6").slideDown(200);
    }else{
      $("#div1").slideUp("slow", function() {
        $("#div2").slideUp("normal", function() {
          $("#div3").slideUp("fast");
        });
      });
      $("#div4").slideUp(600, function() {
        $("#div5").slideUp(400, function() {
          $("#div6").slideUp(200);
        });
      });
    }
  });
Weiterhin möchte ich dich bitten, dich wie in der Netiquette unter Punkt 15 zugestimmt, an die Gross- und Kleinschreibung, sowie der anderen dort genannten Punkte zu halten. Besten Dank im voraus.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück