[jQuery] menu fader with mouseover
I have problems using JQuery to create a menu with fade in and fade
out external images, i.e. i put mouse over a menu item and image fade
in on a another div.
My problem starts when i mouse over faster between itens. All images
appear at the same time.
I would like to schedule a time to stay on the mouse buttons to it so
the image appears.
My code is:
$(function(){
//$("#about-button").css({
// opacity: 0.3
//});
$("#page-wrap div.button").mouseover(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" && $clicked.is(":not
(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 1
}, 1 );
// each button div MUST have a "xx-button" and the target div
must have an id "xx"
var idToLoad = $clicked.attr("id").split('-');
//we search trough the content for the visible div and we fade it
out
$("#content").find("div:visible").fadeOut("slow", function(){
//once the fade out is completed, we start to fade in the right
div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.3,
borderWidth: 1
}, 100 );
});
});
So if someone can help me, thank.
Thans