Skip to content

Instantly share code, notes, and snippets.

@doganoo
Last active Oct 12, 2018
Embed
What would you like to do?
Throttling HTML bars with jQuery JavaScript and CSS transitions
<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