Useful Stuff About:

Sliding button animation

Hover over and click on a button to see the effects.

Here's the code that makes this all work:

Scripts needed (copy and paste inside <head>)


  
<script src="https://www.freestyleacademy.rocks/jquery/modernizr.js"></script><!--See https://modernizr.com/-->
<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script><!--Main jQuery library-->
<script src="https://www.freestyleacademy.rocks/jquery/easing.js"></script><!--Easing libraries-->
<script src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/css-transform.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/transit.js"></script><!--See https://ricostacruz.com/jquery.transit/-->

Here's the HTML code


  
<nav>
    <div id="btn0" class="btn">
      <div class="btnUnder" id="btnUnder0">Button 0</div>
      <div class="btnOver" id="btnOver0">Button 0</div>
    </div>
    <div id="btn1" class="btn">
      <div class="btnUnder" id="btnUnder1">Button 1</div>
      <div class="btnOver" id="btnOver1">Button 1</div>
    </div>
    <div id="btn2" class="btn">
      <div class="btnUnder" id="btnUnder2">Button 2</div>
      <div class="btnOver" id="btnOver2">Button 2</div>
    </div>
    <div id="btn3" class="btn">
      <div class="btnUnder" id="btnUnder3">Button 3</div>
      <div class="btnOver" id="btnOver3">Button 3</div>
    </div>
    <div id="btn4" class="btn">
      <div class="btnUnder" id="btnUnder4">Button 4</div>
      <div class="btnOver" id="btnOver4">Button 4</div>
    </div>
</nav>

Here's the CSS - obviously modify as needed


  
nav, .btn, .btnUnder, .btnOver {
	height: 30px;
}
.btn, .btnUnder, .btnOver {
	width: 125px;
}
nav {
	display: block;
	width: 800px;
	margin: 0 auto;
	top: 0px;
	position: relative;
}
.btn {
	float: left;
	text-align: center;
	cursor: pointer;
	font-size: 1.5em;
	z-index: 10;
	margin-right: 20px;
	position: relative;
	overflow: hidden;
}
.btnUnder, .btnOver {
	position: absolute;
	top: 0;
	left: 0;
}
.btnUnder {
	background-color: #FF0004;
	color: #000000;
	z-index: 2000;
}
.btnOver {
	background-color: #00FF3D;
	color: #FF0004;
	z-index: 2001;
}

Here's the javascript code


  
	var btnHovered, btnHoverTime, btnHoverEasing, btnWidth, btnUnderScaleFactor, btnClicked, currentBtnID;
	currentBtnID = "#btn0";
	btnHoverTime = 750;
	btnHoverEasing = "easeInOutCubic";
	btnUnderScaleFactor=0.8;//Used for making an animation faster (>1) or slower (<1)
	btnWidth = $(".btn").outerWidth(true);//Store the width of all .btn including padding and margin
	$(".btnUnder").css({//Move all .btnUnder divs to the left
		x:-btnWidth
	});
	$("#btn0").find(".btnOver").css({//Move #btn0's .btnOver to the right as if it was hovered on
		x:btnWidth
	});
	$("#btn0").find(".btnUnder").css({//Move #btn0's .btnUnder as visible as if it was hovered on
		x:0
	});
	$("#btn0").css({//Sets the default button to NOT have hand pointer
		"cursor":"default"
	});
	$(".btn").hover(function(){//Actions for hovering ON any button
		btnHovered="#"+$(this).attr("ID");//IMPORTANT!!!
		if (btnHovered!=currentBtnID){//if the button hovered is NOT the button clicked
			$(this).find(".btnOver").stop().transition({//Animate the hovered btn's .btnHover to the right
				x:btnWidth	
			}, btnHoverTime, btnHoverEasing);
			$(this).find(".btnUnder").stop().transition({//Animate the hovered btn's .btnUnder to the right SLOWER than the .btnHover
				x:0	
			}, btnHoverTime*btnUnderScaleFactor, btnHoverEasing);
		}
	}, function (){//Actions for hovering OFF any button
		if (btnHovered!=currentBtnID){//if the button hovered is NOT the button clicked
			$(this).find(".btnOver").stop().transition({//Animate the btn's .btnOver to the left SLOWER than the the .btnUnder
				x:0
			}, btnHoverTime*btnUnderScaleFactor, btnHoverEasing);
			$(this).find(".btnUnder").stop().transition({//Animate the btn's .btnUnder to the left
				x:-btnWidth
			}, btnHoverTime, btnHoverEasing);
		}
	});
	$(".btn").click(function(){
		if (btnHovered!=currentBtnID){//if the button hovered is NOT the button clicked
			$(currentBtnID).find(".btnOver").stop().transition({//Animate the previously clicked .btn's .btnOver to the left
				x:0
			},btnHoverTime, btnHoverEasing);
			$(currentBtnID).css({//Resets previously clicked button to have the hand pointer
				"cursor":"pointer"
			});
			currentBtnID="#"+$(this).attr("ID");//Stores NEW value for the button clicked.
			$(this).css({//Changes currently clicked button to NOT have hand pointer
				"cursor":"default"
			});
			btnClicked=$(this).attr("ID");//Use for other other actions
			//actions for clicked button
		}
	});