The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fade One Image to Another Menu – with Button Active state and Resets for All Other Buttons?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #36186


    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:

    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:



    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}


    $(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.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.