Forum user: paradise

I'm sorry, I have another question! I'm trying to show an overlay when the mouse is hovered over a link, but I want the overlay to disappear when the mouse is removed. Sort of like the tooltip but I'm using the tabs function for it because I found it difficult to make the overlay appear where I wanted. It works great but I don't know how to tell it to hide the overlay when the mouse is moved away from the link.

$(function() {
$("ul.readmore").tabs("div.overlay > div",{current: 'active',event: "mouseover",effect: "fade", fadeInSpeed: "slow"});

});

<ul class="readmore">

read more...

<div class="overlay">
<div></div>
<div><img src="i/overlay.png"></div>
</div>

I threw an empty div in there because I don't want the overlay shown when the page loads (probably not the best way to do that huh?)

Thanks for all your help!

So....like this?

$(function() {
$("ul.tabs").tabs("div.panes > div",{current: 'active',effect: "fade", fadeInSpeed: "slow" });

Do I use fast, normal, slow? Or is there a way to control it in seconds?

aha! Got it figured out. Duh.

$(function() {
$("ul.tabs").tabs("div.panes > div",{current: 'active',effect: "fade" });

});

Does anyone know where I can control the speed of the fade?

First thank you for such a wonderful resource!

My skills with javascript are really poor but I've been attempting to add a fade in/out effect to the panes when one of the tabs are selected. It's not going well and I was hoping you guys could tell me what I'm doing wrong.

I had started out with the original script and modified it to this, which doesn't work at all:

<script>
$(function() {
$("ul.tabs").tabs("div.panes > div","div.panes", {
effect: "fade"
});
});
</script>

I've linked to the jquery.tools.min.js and the tools.tabs.js.