Hi,
I need a little help as I am really new to jQuery.
I followed a tutorial posted on this site a while ago called Fade One Image to Another Menu:
https://css-tricks.com/snippets/jquery/fade-one-image-to-another-menu/
But I am having no luck trying to figure out how to keep the active state on a button click though I have tried a load of stuff more by trial and error really.
Anyway I really like the way the menu works and need to find this solution. Can anyone help?
I have copied and pasted to code from the tutorial below in case it helps:
HTML:
CSS:
ul#menu li a{float:left;display:block;background:url("images/menu.png") no-repeat;width:150px;text-indent:-9999px;height:50px}
ul#menu li#home a{background-position:0px 0px}
ul#menu li#about a{background-position:-150px 0px}
ul#menu li#services a{background-position:-300px 0px}
ul#menu li#contact a{background-position:-450px 0px}
ul#menu li a span {background:url("images/menu.png");height:50px;display:block}
ul#menu li#home a span{background-position:0px -50px}
ul#menu li#about a span{background-position:-150px -50px}
ul#menu li#services a span{background-position:-300px -50px}
ul#menu li#contact a span{background-position:-450px -50px}
jQuery:
$(function() {
$("ul#menu li a").wrapInner("");
$("ul#menu li a span").css({"opacity" : 0});
$("ul#menu li a").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});
Any help would really be appreciated.
