Skip to content

Instantly share code, notes, and snippets.

@patrickberkeley

patrickberkeley/fade.css

Created August 10, 2009 18:43
Show Gist options
  • Save patrickberkeley/165348 to your computer and use it in GitHub Desktop.
Save patrickberkeley/165348 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fade.css
body {
font: 86.5% Arial, sans-serif;
}
#container {
width: 960px;
margin: 0 auto;
padding: 60px 10px 10px 40px;
}
.boxy {
width: 270px;
min-height: 300px;
border: 1px solid silver;
padding: 15px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
p {
width: 250px;
background-color: beige;
}
a {
text-decoration: none;
}
a:visited {
color: black;
}
Raw
fade.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fade</title>
<link type="text/css" rel="stylesheet" media="screen" href="fade.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="./fade.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="boxy">
<h1><a href="#" class="fader" id="fader-1">LINK</a></h1>
<p class='fadee' id="fadee-1">Proin sit amet eros vitae nibh dapibus vestibulum in eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
</div>
<div class="boxy">
<h1><a href="#" class="fader" id="fader-2">LINK</a></h1>
<p class='fadee' id="fadee-2">Proin sit amet eros vitae nibh dapibus vestibulum in eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
</div>
<div class="boxy">
<h1><a href="#" class="fader" id="fader-3">LINK</a></h1>
<p class='fadee' id="fadee-3">Proin sit amet eros vitae nibh dapibus vestibulum in eget ipsum. Cras adipiscing rhoncus arcu, sed condimentum arcu eleifend faucibus. Etiam gravida lacus sed mauris luctus quis congue elit blandit. Maecenas semper interdum sapien sit amet ornare. Nam tellus neque, posuere ut feugiat vitae, aliquet et lorem. Sed euismod dictum ipsum et iaculis. Aliquam erat volutpat.</p>
</div>
</div>
</body>
</html>
Raw
fade.js
// jquery effect experiment by calvin stephens
$(document).ready(function() {
// Set the stage
$('.fadee').hide();
// Fades object out, then in
function blinkFade(blinkMe) {
blinkMe.fadeOut('slow').fadeIn('slow');
};
// Fades in if hidden, fades out if showing
function swapFade(swapMe) {
// English tranlsation: if swapMe is hidden, then fade swapMe in, otherwise fade swapMe out
swapMe.is(':hidden') ? swapMe.fadeIn('slow') : swapMe.fadeOut('slow');
};
$('.fader').hover(function() {
var fader = $(this); // The object that has been hovered over that has class 'fader'
var fadee = $(this).parent().siblings(".fadee"); // The siblings of the hovered over object that have class 'fadee'
blinkFade(fader);
swapFade(fadee);
return false;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment