JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

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="http://www.freestyleacademy.rocks/jquery/modernizr.js"></script><!--See http://modernizr.com/-->
<script src="http://www.freestyleacademy.rocks/jquery/minified.js"></script><!--Main jQuery library-->
<script src="http://www.freestyleacademy.rocks/jquery/easing.js"></script><!--Easing libraries-->
<script src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/css-transform.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/transit.js"></script><!--See http://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
}
});