This jQuery code will slide up a hidden <div> up on hover() and slide down the same <div> on blur(). This script uses the jQuery UI visual control library.
JavaScripts
Place the following in the section of your code.
Locally.
<script src="js/jquery.js"></script>
<script src="js/jquery.effects.core.js"></script>
<script src="js/jquery.effects.slide.js"></script>Or you can call the scripts directly from jQuery.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>HTML
<div id="splash-image">
<img src="images/mercedes-c63-amg.jpg" alt="" />
</div>
<div class="tab-text tab-1">1</div>
<div class="tab-text tab-2">2</div>
<div class="tab-text tab-3">3</div>
<div class="tab-text tab-4">4</div>
<div id="splash-tabs">
<div class="splash-tab"><a class="tab-text" rel="1" href="#">First</a></div>
<div class="splash-tab"><a class="tab-text" rel="2" href="#">Second</a></div>
<div class="splash-tab"><a class="tab-text" rel="3" href="#">Third</a></div>
<div class="splash-tab"><a class="tab-text" rel="4" href="#">Fourth</a></div>
</div>jQuery Code
$(document).ready(function(){
$("div.splash-tab").hover(
function () {
$(this).addClass("splash-tab-hover");
},
function () {
$(this).removeClass("splash-tab-hover");
}
);
$("a.tab-text").hover(
function () {
var tab = $(this).attr("rel");
$("div.tab-" + tab).show("slide", { direction: "down" }, 500);
},
function () {
var tab = $(this).attr("rel");
$("div.tab-" + tab).hide("slide", { direction: "down" }, 500);
}
);
});Demo and Download
Resources
[...] Maletsky presents jQuery Show and Tell posted at Website Builders Resource, saying, “This jQuery code will slide up a hidden up on [...]
Nice effect.
You’ve got an issue on FF3/Mac – looks like a z-index problem when you mouse over the 4th item the sliding panel makes the mouseover event lose the trigger. Holding your mouse over the button causes the panel to slide up and down continuously.
There are various ways to deal with this – I’m sure you know what you’re doing
hth
Thanks for the feedback. I’ll fix the bug ASAP.
The issue might also exist for Safari for Mac as well. I’ve noticed that some issues for FF3 for Mac also affect Safari for Mac. I’ll borrow an Apple from work…
Good tutorial, but you should use this (http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup) to prevent animation queue.
Thanks for the tip. I’ll apply this along with the Mac update.
Can you tell it to open and then close like the facebook friends online at the bottom of the screen?