Using hover and click together... (newbie)
I'm building a menu that uses animated hover and click commands, but I'm having trouble getting them to work together. The goal is to have the opacity animate to 75% during a hover and then when clicked it would animate to 100% and stay there (until another click). The current code (below) works except for the opacity staying at 100%, even after a click the opacity animates back to 50% when the mouse leaves. You can see it at
http://stuckonon.com/tester.html#projects Borrowing code from others, this is what I've got:
-
$(function(){
$("#menu-wrap div.button, div.button2").hover(function(){
$(this).animate({opacity: 0.75},{queue:false,duration:500});
}, function(){
$(this).animate({opacity: 0.5},{queue:false,duration:500});
});
$("#menu-wrap div.button, div.button2").click(function(){
$clicked = $(this);
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1
}, 300);
var idToLoad = $clicked.attr("id").split('-');
$("#menulist").find("div:visible").fadeOut("fast", function(){
$(this).parent().find("#" + idToLoad[0]).fadeIn();
})
}
$clicked.siblings(".button,.button2").animate({
opacity: 0.5}, 300 );
});
});