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-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Button Hovers and Clicks with sliding images

Problem: How do you have both jquery hover and click animations work in sync and logically - when sliding off?

Hover/Click on a button below to see demo

Scripts needed (copy and paste inside <head>) - ONLY ONE OF EACH LINE - CHECK FOR DUPLICATES


<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 class="btn" id="btn0">
<div class="btnText">Intro</div>
<div class="btnImgBox" id="btnImgBox0"><img src="images/btnGiants.png" class="btnImg btnImg1" id="btnImg0"/><img src="images/btn49ers.png" class="btnImg btnImg2"/></div>
</div>
<div class="btn" id="btn1">
<div class="btnText">Magazine</div>
<div class="btnImgBox" id="btnImgBox1"><img src="images/btnGiants.png" class="btnImg btnImg1" id="btnImg1"/><img src="images/btn49ers.png" class="btnImg btnImg2"/></div>
</div>
<div class="btn" id="btn2">
<div class="btnText">Photogallery</div>
<div class="btnImgBox" id="btnImgBox2"><img src="images/btnGiants.png" class="btnImg btnImg1" id="btnImg2"/><img src="images/btn49ers.png" class="btnImg btnImg2"/></div>
</div>
<div class="btn" id="btn3">
<div class="btnText">Presentation</div>
<div class="btnImgBox" id="btnImgBox3"><img src="images/btnGiants.png" class="btnImg btnImg1" id="btnImg3"/><img src="images/btn49ers.png" class="btnImg btnImg2"/></div>
</div>
<div class="btn" id="btn4">
<div class="btnText">Projects</div>
<div class="btnImgBox" id="btnImgBox4"><img src="images/btnGiants.png" class="btnImg btnImg1" id="btnImg4"/><img src="images/btn49ers.png" class="btnImg btnImg2"/></div>
</div>
</nav>

Here's the CSS


nav {
width:800px;
height:150px;
position:relative;
margin:0 auto;
}
.btn {
position: relative;
text-align: center;
z-index: 1001;
width: 150px;
height: 150px;
float:left;
overflow:hidden;
}
.btnText{
position:absolute;
top:0;
left:0;
width:100%;
text-align:center;
z-index:1002;
}
.btnImgBox{
position:absolute;
top:0px;
left:0;
width:150px;
height:150px;
z-index:1003;
cursor: pointer;
overflow:hidden;
}
.btnImg{
width:150px;
height:150px;
position:absolute;
z-index:1003;
top:0px;
left: 0px;
}
.btnImg1 {
margin-left:0;
}
.btnImg2 {
margin-left:-150px;
}

Here's the javascript code


var imgBoxClicked, imgBoxHovered, imgHovered, slideTime=500, hoverEasingOut="easeInQuint", hoverEasingIn="easeOutQuint";
var btnW=$(".btnImgBox").outerWidth(true);
$("#btn0").find(".btnImg1").css({
"margin-left":-btnW
});
$("#btn0").find(".btnImg2").css({
"margin-left":0
});
imgBoxClicked = "#btnImgBox0";
$(imgBoxClicked).css({"cursor":"default"});
$(".btn").hover(function () { //actions to occur when you hover ON
imgBoxHovered="#"+$(this).find(".btnImgBox").attr("ID");
if (imgBoxHovered!=imgBoxClicked){//if the hovered image is NOT the same as the clicked image
$(this).find(".btnImg1").stop().delay(slideTime*0).animate({
"margin-left":-btnW
},slideTime,hoverEasingOut);
$(this).find(".btnImg2").stop().delay(slideTime*0.5).animate({
"margin-left":0
},slideTime,hoverEasingIn);
}
}, function () { //actions to occur when you hover OFF
if (imgBoxHovered!=imgBoxClicked){//if the button image hovered is NOT the same as the clicked image
$(this).find(".btnImg1").stop().delay(slideTime*0.5).animate({
"margin-left":0
},slideTime,hoverEasingIn);
$(this).find(".btnImg2").stop().delay(slideTime*0).animate({
"margin-left":-btnW
},slideTime,hoverEasingOut);
}
});
$(".btn").click(function () {
$(imgBoxClicked).find(".btnImg1").stop().delay(slideTime*0.5).animate({
"margin-left":0
},slideTime,hoverEasingOut);
$(imgBoxClicked).find(".btnImg2").stop().delay(slideTime*0).animate({
"margin-left":-btnW
},slideTime,hoverEasingOut);
if (imgBoxHovered!=imgBoxClicked){//if the button hovered on is NOT the same as the currently clicked button
imgBoxClicked="#"+$(this).find(".btnImgBox").attr("ID");
$(this).find(".btnImg1").css({
"margin-left":-btnW
});
$(this).find(".btnImg2").css({
"margin-left":0
});
$(".btnImgBox").css({//Resets all buttons to have default hand pointer
"cursor": "pointer"
});
$(imgBoxClicked).css({//Resets all buttons to have default hand pointer
"cursor": "default"
});
var btnClicked=$(this).attr("ID");
};
});