Brugernavn:



Kodeord: Husk
Forside Forum Artikler Downloads Sřg
 

jQuery slideDown/up

Hej rowlere.


Er igang med at lære jQuery, af forskellige årsager.
1. det er fedt
2. det vil udvikle mig så meget indenfor programmering.


Men altså. Har lavet en lille slidedown function, men kan simpelthen ikke for den til at slide up igen når jeg klikker. Har prøvet forskellige ting og jeg skal ikke rigtigt bruge dette til noget, det kunne bare være rart at vide hvordan man gør..

Min kode er således:
  1. <html>
  2. <head>
  3. <style>
  4. #boks {
  5. background-color: red;
  6. height: 300px;
  7. width: 300px;
  8. display: none;
  9. }
  10. </style>
  11. <script src="http://code.jquery.com/jquery-1.2.6.min.js" type="text/javascript"></script>
  12. </head>
  13. <body>
  14. <script>

  16. $(function() {
  17. $('a').click(function() {
  18. $('#boks').slideDown(1000);
  19. });
  20. });

  22. </script>

  24. <div id="boks"></div>
  25. <a href="#">Klik</a>
  26. </body>
  27. </html>

Nogle der kan give en kort forklaring/kode på hvordan man gør :)? tak.
Oprettet af:
MikL

Javascript

Fri debat

Ĺben
17:36 25/05/2010
Nej dsv. :)
Oprettet af:
Habzi.Dk

Kommentar
18:12 25/05/2010
  1.     $(".adSearch").click( function(){
  2.         
  3.         if($("#advancedSearch").is(":visible"))
  4.         {
  5.             $("#advancedSearch").slideUp("medium", function(){
  6.                 $("#simpleSearch").slideDown("medium");
  7.                 
  8.             });
  9.         }else
  10.         {
  11.             $("#simpleSearch").slideUp("medium", function(){
  12.                 $("#advancedSearch").slideDown("medium");
  13.                 
  14.             });
  15.         }
  16.         
  17.     });

Prøv at kig på den funktion :)
Den bruger jeg selv på en af mine sider..
Oprettet af:
inctor

Kommentar
18:39 25/05/2010
Hmm. Altså vil ikke copypaste, skal forstå det der er. Har prøvet at lave dette, men så virker det slet ikke:
  1. <script>

  3. $('a').click(function() {
  4. if($(#boks).is(":visible"))
  5. {

  7. $('#boks').slideDown(1000);
  8. });
  9. }else{
  10. $(function() {
  11. $('#boks').slideUp(1000);
  12. });
  13. }
  14. });
  15. </script>
Oprettet af:
MikL

Kommentar
20:43 25/05/2010
  1. <script>
  2. $(document).ready(function(){
  3.     $("#boks").click(function(){
  4.     $("#boks2").toggle('slow');
  5.     });
  6. });
  7. </script>



  11. <div id="boks"><a href="#">Klik</a></div>
  12. <div id="boks2" style="display:none;"></div>

Den bruger jeg altid og det virker både klik op og ned :)
Du kan søge efter toogle, man kan også sætte farten og skrive fast tror jeg :)
Oprettet af:
Sammy

Kommentar
23:36 25/05/2010
Nu virker det med .toggle, men synes toggle er grim. Jeg vil have mit slideUp og slideDown, da jeg skal bruge det til noget onlineliste :) Så ved i hvordan man kan gøre med up/down?
Oprettet af:
MikL

Kommentar
07:20 26/05/2010
  1. <script type="text/javascript">
  2. $(document).ready( function(){  
  3.     $('a').click(function() {
  4.         if($("#boks").is(":visible"))
  5.         {
  6.             //Boksen er synlig, så skjul den!
  7.             $('#boks').slideUp("slow");
  8.         
  9.         }else{
  10.             //Boksen er ikke synlig, så vis den!
  11.             $("#boks").slideDown("slow");
  12.         }
  13.     });
  14. });
  15. </script>
Oprettet af:
inctor

Kommentar
11:23 26/05/2010
hvis jeg har forstået det rigtigt så skal den køre ned og pop af sig selv

$(function() {
$('a').click(function() {
$('#boks').slideDown(1000);
$('#boks').slideUp(1000);
});
});
Oprettet af:
SimonJ

Kommentar
12:35 26/05/2010
Nej, den skal køre op igen, når man klikker på knappen :-)
Oprettet af:
MikL

Kommentar
15:19 26/05/2010
Tage et lille kig på koderne bag dette sliding panel -> http://web-kreation.com/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Jeg tør væde på der er noget du kan bruge til at hjælpe dig videre ;)
Oprettet af:
Goatie

Kommentar
19:47 26/05/2010
Det script jeg skriv MikL det virker .. Har testet det..


  1. <html>
  2. <head>
  3. <style>
  4. #boks {
  5. background-color: red;
  6. height: 300px;
  7. width: 300px;
  8. display: none;
  9. }
  10. </style>
  11. <script src="http://code.jquery.com/jquery-1.2.6.min.js" type="text/javascript"></script>
  12. </head>
  13. <body>
  14. <script>


  17. $(document).ready( function(){  
  18.     $('a').click(function() {
  19.         if($("#boks").is(":visible"))
  20.         {
  21.             //Boksen er synlig, så skjul den!
  22.             $('#boks').slideUp("slow");
  23.         
  24.         }else{
  25.             //Boksen er ikke synlig, så vis den!
  26.             $("#boks").slideDown("slow");
  27.         }
  28.     });
  29. });

  31. </script>

  33. <div id="boks"></div>
  34. <a href="#">Klik</a>
  35. </body>
  36. </html>
Oprettet af:
inctor

Kommentar
20:04 26/05/2010
inctor skrev kl. 20:04 d. 26/05/2010
Det script jeg skriv MikL det virker .. Har testet det..


  1. <html>
  2. <head>
  3. <style>
  4. #boks {
  5. background-color: red;
  6. height: 300px;
  7. width: 300px;
  8. display: none;
  9. }
  10. </style>
  11. <script src="http://code.jquery.com/jquery-1.2.6.min.js" type="text/javascript"></script>
  12. </head>
  13. <body>
  14. <script>


  17. $(document).ready( function(){  
  18.     $('a').click(function() {
  19.         if($("#boks").is(":visible"))
  20.         {
  21.             //Boksen er synlig, så skjul den!
  22.             $('#boks').slideUp("slow");
  23.         
  24.         }else{
  25.             //Boksen er ikke synlig, så vis den!
  26.             $("#boks").slideDown("slow");
  27.         }
  28.     });
  29. });

  31. </script>

  33. <div id="boks"></div>
  34. <a href="#">Klik</a>
  35. </body>
  36. </html>


Har kigget på det, forstår det også nu. Tak for det :) Det virker
Oprettet af:
MikL

Kommentar
21:13 26/05/2010
Du skal vćre oprettet og logget ind for at svare pĺ en trĺd
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes