0
jQuery Equal Height Clickable Div Boxes That Fade Siblings On Hover
This is a fantastic combination of jQuery code that takes a group of div containers, and makes them all the same height. When you hover over one of them, it will fade out the sibling divs, the ones your not hovering over, and adds a class to the one you are hover for addition styles you can choose to add. Then If there is a link say a title, or something for each div box, it grabs that and makes the whole div containers clickable. Fantastic!
$(function() {
// Make boxes equal heights
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) { tallest = thisHeight; }
});
group.height(tallest);
}
equalHeight($(".boxes"));
// Fade out sibling boxes on hover
$('.boxes a img').css( 'opacity', '1' );
$('.boxes').hover(function () {
$(this).siblings().stop().animate({ opacity: 0.5 }, 'fast' );
}, function () {
$(this).siblings().stop().animate({ opacity: 1 }, 'fast' );
});
// Whole box clickable
$(".boxes").click(function(){
window.location = $(this).find('a').attr('href');
return false;
});
});
<div id="bottom"> <div class="boxes"> <a href="#"> <img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" alt="" /> </a> <h2><a href="#">Title</a></h2> <p>Text here for the thing you want to show.</p> </div> <div class="boxes"> <a href="#"> <img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" alt="" /> </a> <h2><a href="#">Title</a></h2> <p>Text here for the thing you want to show.</p> </div> <div class="boxes"> <a href="#"> <img src="http://new2wp.com/wp-content/uploads/2010/02/fun.png" alt="" /> </a> <h2><a href="#">Title</a></h2> <p>Text here for the thing you want to show.</p> </div> </div>
Levels: Syntax: HTML, JavaScript, jQuery
