JQuery animate and slidetoggle are very buggy and glitch often.

JQuery animate and slidetoggle are very buggy and glitch often.

Hey people.

I am new to JQuery, I've only done a little dabbling in the past and am now trying to build a larger program. I want to eventually turn this into a wordpress plugin but this post is not about that.

I am using slidetoggle to cause an area to show up upon certain buttons being pressed and I am using animate to make sure the area that is shown is in the main focus, this is because before I used animate the area would come up due to the slidetoggle but half of the area would be off screen, not very professional.

I am noticing an issue however:

1 - Click on the image, the rise is fine, but the second time it's clicked the close is rather abrupt. (the animation goes right to the top of the page, make it not smooth at all)

2 - In general things still seem rather jaggy.

Am I doing something wrong? 

The live link:


JS
  1. $(document).ready(function(){
  2.     //$('.slider_content').hide();
  3.     var toggle = 0;
  4.     var open = false;
  5.     //Row one
  6.     $("#hide_panel1").click(function(){
  7.      $("#toggle1").trigger('click');
  8.     });
  9.     
  10.     $("#toggle1").click(function(){
  11.         if(toggle != 1 && open == true){
  12.             open = false;
  13.             var panel = "#panel"+toggle;
  14.             $(panel).slideToggle("slow");
  15.         }
  16.         toggle = 1;
  17.         $("#panel1").slideToggle("slow",function(){

  19.         $('html, body').animate({
  20.    scrollTop: $("#panel1").offset().top
  21.    }, 2000);});
  23.         if(open == true)
  24.             open = false;
  25.         else
  26.             open = true;
  27.     });
  28.     $("#toggle2").click(function(){
  29.         if(toggle != 2 && open == true){
  30.             open = false;
  31.             var panel = "#panel"+toggle;
  32.             $(panel).slideToggle("slow");
  33.         }
  34.         toggle = 2;
  35.         $("#panel2").slideToggle("slow",function(){

  37.         $('html, body').animate({
  38.    scrollTop: $("#panel2").offset().top
  39.    }, 2000);});
  41.         if(open == true)
  42.             open = false;
  43.         else
  44.             open = true;
  45.     });
  46.     //Row two
  47.     $("#toggle3").click(function(){
  48.         if(toggle != 3 && open == true){
  49.             open = false;
  50.             var panel = "#panel"+toggle;
  51.             $(panel).slideToggle("slow");
  52.         }
  53.         toggle = 3;
  54.         $("#panel3").slideToggle("slow",function(){

  56.         $('html, body').animate({
  57.    scrollTop: $("#panel3").offset().top
  58.    }, 2000);});
  61.         if(open == true)
  62.             open = false;
  63.         else
  64.             open = true;
  65.     });
  66.     $("#toggle4").click(function(){
  67.         if(toggle != 4 && open == true){
  68.             open = false;
  69.             var panel = "#panel"+toggle;
  70.             $(panel).slideToggle("slow");
  71.         }
  72.         toggle = 4;
  73.         $("#panel4").slideToggle("slow",function(){

  75.         $('html, body').animate({
  76.    scrollTop: $("#panel4").offset().top
  77.    }, 2000);});
  80.         if(open == true)
  81.             open = false;
  82.         else
  83.             open = true;
  84.     });
  85. });

HTML

  1. <html>
  2. <head>
  3. <title>Demo</title>
  4. <link rel="stylesheet" type="text/css" href="styles.css">
  5. <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  6. <script src="vertslider.js"></script>
  7. </head>

  9. <body>
  10. <div class="main">
  11. <div class="title">
  12. <h1>Demo for slider</h1>
  13. <h2>We are just using JQuery and HTML for this demo.</h2>
  14. </div>
  16. <div class="vertical_slider">
  17. <!-- The first row of panels -->
  18. <div class="slider_content" id="panel1">
  19. <a href="#" id="hide_panel1">
  20. <div class="hide_button">
  21. <h2>HIDE</h2>
  22. </div>
  23. </a>
  24. <div class="fat_col">
  25. </div>
  26. <div class="slim_col">
  27. <p class="default_text">This is some content for item 1</p>
  28. </div>
  29. </div>
  30. <div class="slider_content" id="panel2">
  31. <div class="fat_col">
  32. </div>
  33. <div class="slim_col">
  34. <p>This is some content for item 2</p>
  35. </div>
  36. </div>
  37. <!-- The first row of testimonial items -->
  38. <div class="row">
  40. <a href="#" id="toggle1">
  41. <div class="item" id="img1"></div>
  42. </a>
  43. <a href="#" id="toggle2">
  44. <div class="item" id="img2"></div>
  45. </a>
  46. </div>
  47. <!-- The second row of panels -->
  48. <div class="slider_content" id="panel3">
  49. <div class="fat_col">
  50. </div>
  51. <div class="slim_col">
  52. <p>This is some content for item 3</p>
  53. </div>
  54. </div>
  55. <div class="slider_content" id="panel4">
  56. <div class="fat_col">
  57. </div>
  58. <div class="slim_col">
  59. <p>This is some content for item 4</p>
  60. </div>
  61. </div>
  62. <!-- The second row of testimonial items -->
  63. <div class="row">
  65. <a href="#" id="toggle3">
  66. <div class="item" id="img3"></div>
  67. </a>
  68. <a href="#" id="toggle4">
  69. <div class="item" id="img4"></div>
  70. </a>
  71. </div>
  73. </div>
  75. </div>
  76. </body>
  77. </html>

CSS

  1. body {
  2.     font-family: sans-serif;
  3.     width: 90%;
  4.     margin: 0 auto;
  5. }

  7. #lower1, #lower2 {
  8.     position: relative;
  9.     padding-top: 10px;
  10. }

  12. #bar {
  13.     padding: 10px;
  14.     background-color: #CCCCCC;
  15. }

  17. .slider_content {
  18.     display: none;
  19.     background-color: #cccccc;
  20. margin-left:20px;
  21. margin-right:20px;
  22. margin-top:40px;
  23. margin-bottom:20px;
  24.     width:1000px;
  25.     height:600px;
  26.     
  27. }

  29. #panel1, #panel2, #panel3, #panel4 {
  30.     display: none;
  31.     background-color: #AAAAAA;
  32.     padding: 10px;
  33. }

  35. .fat_col {
  36. width:700px;
  37. }

  39. .slim_col {
  40. width:300px;
  41. }

  43. .hide_button {
  44. width:1000px;
  45. height:30px;
  46. text-align:center;
  47. margin-top:-30px;
  48. }

  50. .title {
  51. padding:30px;
  52. }

  54. .panel {


  57. }

  59. .item {
  60. margin-left:20px;
  61. margin-right:20px;
  62. margin-top:20px;
  63. margin-bottom:20px;
  64. width:500px;
  65. height:300px;
  66. float:left;
  67. }
  68. /* Image backgrounds and their hovers */

  70. #img1 {
  71. background: url('images/img1.png') no-repeat left top;
  72. }

  74. #img1:hover {
  75. background-position: -500px 0px;
  76. }

  78. #img2 {
  79. background: url('images/img2.png') no-repeat left top;
  80. }

  82. #img2:hover {
  83. background-position: -500px 0px;
  84. }

  86. #img3 {
  87. background: url('images/img3.png') no-repeat left top;
  88. }

  90. #img3:hover {
  91. background-position: -500px 0px;
  92. }

  94. #img4 {
  95. background: url('images/img4.png') no-repeat left top;
  96. }

  98. #img4:hover {
  99. background-position: -500px 0px;
  100. }

  102. /* Row controls */

  104. .row {
  105. width:1200px;
  106. height:300px;
  107. }