Last active
October 12, 2018 14:57
-
-
Save doganoo/4d105745b2d0910b4bd298e2824acc2c to your computer and use it in GitHub Desktop.
Throttling HTML bars with jQuery JavaScript and CSS transitions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| body{ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .container{ | |
| padding: 0; | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-end; | |
| align-content: center; | |
| background: green; | |
| min-height: 700px; | |
| } | |
| .bar{ | |
| background: tomato; | |
| margin-left: 50px; | |
| width: 200px; | |
| height: 600px; | |
| margin-top: 10px; | |
| transition:width 900ms ease-in-out, height 900ms ease-in-out; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .text{ | |
| color: white | |
| } | |
| .bar-transisted{ | |
| background: tomato; | |
| margin-left: 50px; | |
| width: 200px; | |
| height: 300px; | |
| margin-top: 10px; | |
| transition:width 900ms ease-in-out, height 900ms ease-in-out; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| </style> | |
| <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script> | |
| $( document ).ready(function() { | |
| var normal =true; | |
| var x = function(){ | |
| if(normal){ | |
| $(".bar").removeClass('bar').addClass('bar-transisted'); | |
| normal = false; | |
| }else{ | |
| $(".bar-transisted").removeClass('bar-transisted').addClass('bar'); | |
| normal = true; | |
| } | |
| }; | |
| $("#transist").on("click",_throttle(x,3000)); | |
| function _throttle(func, delay){ | |
| console.log("throttling"); | |
| var timer = null; | |
| return function(){ | |
| if(!timer){ | |
| timer = setTimeout(function(){ | |
| timer = null; | |
| console.log("executing throttle fnction!"); | |
| func(); | |
| }, delay); | |
| }else{ | |
| console.log("can not execute since throttle timeout has to be exceed"); | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <button id='transist'>Click me!</button> | |
| <div class='container'> | |
| <div class='bar'><div class='text'>BAR 1</div></div> | |
| <div class='bar'><div class='text'>BAR 2</div></div> | |
| <div class='bar'><div class='text'>BAR 3</div></div> | |
| <div class='bar'><div class='text'>BAR 4</div></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment