Useful Stuff About:

Button Hovers and Clicks

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

This is an example of of soliving the problem with these features:

buttons that fade transition when hovered
the button already clicked has the hand pointer cursor disabled
the button previously clicked will fade back into its normal unclicked state
the button clicked will remain in its hovered or clicked state
customizable fade times
same code can be applied to any number of buttons
this CAN use image sprites with the normal image on top and the hover image on the bottom of the sprites. Basically the same image sprite is used as the background of the button div and inside the button div - the CSS is used to hide the part of the image you don't want to see using the property overflow:hidden and the CSS is used to position the background image to see the correct hover image by using the background-position CSS property

Hover/Click on a button below to see demo

clicked

UNclicked

Scripts needed (copy and paste inside <head>)


    
<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>

Here's the html code


    
<div class="btn" id="btn1">
   <a href="#" target="_blank"><img id="imgbtn1" src="path/to/image1.png"/></a>
</div>
<div class="btn" id="btn2">
   <a href="#" target="_blank"><img id="imgbtn2" src="path/to/image2.png"/></a>
</div>
<div class="btn" id="btn3">
   <a href="#" target="_blank"><img id="imgbtn3" src="oath/to/image3.png"/></a>
</div>

Here's the CSS


    
.btn {
   background-position:0 -50px;//change this to half the height of the image sprite 	
   background-repeat:no-repeat;
   overflow:hidden;//hides the top half of the image sprite
}
#btn1 {
   background-image: url(path/to/image1.png);
}
#btn1 {    
   background-image: url(path/to/image2.png);
}
#btn1 {
   background-image: url(path/to/image3.png);
}

Here's the javascript code


    
$(document).ready(function(e){
   var imgClicked, imgHovered, fadeTime=500;
	imgClicked = "#"+ $("#btn1").find("img").attr("id");
	$(imgClicked).animate({"opacity":"0"},1,"linear");
	$(imgClicked).css({"cursor":"default"});
	$(".btn").hover(function () { //actions to occur when you hover ON
		imgHovered = "#" + $(this).find("img").attr("id")//IMPORTANT!!!
		if (imgHovered!=imgClicked){//if the hovered image is NOT the same as the clicked image
			$(imgHovered).stop().animate({"opacity":"0"},fadeTime,"linear");//Animate the hovered image to fade out
		}
	}, function () { //actions to occur when you hover OFF
		if (imgHovered!=imgClicked){//if the button image hovered is NOT the same as the clicked image
			$(imgHovered).stop().animate({"opacity":"1"},fadeTime,"linear");//Animate the hovered image to fade in
		}
	});
	$(".btn").click(function () {
		if (imgHovered!=imgClicked){//if the button hovered on is NOT the same as the currently clicked button
			$(".btn").find("img").css({//Resets all buttons to have default hand pointer
				"cursor": "pointer"
			});
			$(imgClicked).stop().animate({"opacity":"1"},fadeTime,"linear");//fades IN previously clicked button
			imgClicked = "#" + $(this).find("img").attr("id");//Stores new value for currently clicked button image
			$(imgClicked).css({"opacity":"0"});//Sets the currently clicked image to transparent
			$(imgClicked).css({//Changes current button image to NOT have the hand pointer
				"cursor": "default"
			});
			btnClicked=$(this).attr("ID");//Stores new value for currently clicked button ID for use in other functions
			//actions for clicked button
		}
	});
});