ThemeShaper Forums » Thematic


jQuery button background fade

(3 posts)
  • Started 11 years ago by anubis5
  • Latest reply from anubis5
  • This topic is resolved


  1. anubis5

    Hello, I hope I can explain this properly. What I am trying to do is add a jQuery mouseover fade in and out effect to the menu, using a background image.

    I was able to achieve this fine with CSS no problem, with the example code:

    .sf-menu a {
    padding:19px 15px 12px 15px;
    margin-right: 0;
    background: none;

    .sf-menu li {
    background: none;

    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu ul a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:url('images/button.png') repeat-x top left;
    outline: 0;

    So as you can see, it start with no background, then adds a background after you hover over it, which looks and works fine. But then I decided I wanted that background to fade in and out with the mouse over, so I looked to jQuery. I'm very new to jQuery, but I implemented something that sort of works, but I'm not sure where to go with it next. Here is the code I used:

    jQuery(".sf-menu li").fadeTo("fast", 0.0);
    jQuery(".sf-menu a").fadeTo("fast", 1.0);

    jQuery(".sf-menu li").hover(function(){
    jQuery(this).fadeTo("fast", 1.0);
    jQuery(this).fadeTo("fast", 0.0);

    jQuery(".sf-menu a").hover(function(){
    jQuery(this).fadeTo("fast", 1.0);
    jQuery(this).fadeTo("fast", 1.0);

    Now I know this is the wrong way to implement it, but it starts with the whole menu structure faded out, then when you mouse over it fades in, but I'm not entirely sure how to make just the background fade in and out and not everything, including the text.

    Any thoughts or suggestions would be greatly appreciated. Thank you

    Posted 11 years ago #
  2. anubis5

    Here is an update:

    I found a far better way to do what I wanted. The jQuery blend effect:

    But I've ran into one problem. It creates an image overlay for the fade effect, so when I attach it to '.sf-menu li', the fade works perfectly, however, then I loose the menu drop down on the menu mouseover, because of the overlay.

    So, I attempted to attached the blend effect to '.sf-menu a' which is working, while keeping drop down menu, but I run into all kinds of random css problems, cross browser.

    So here is my question. I don't know really anything about the menu thematic uses, but could it be possible to write a function to have the drop down menu work from the '.sf-menu a' mouseover tag instead of the '.sf-menu li' mouseover tag? I'm hoping this is making some bit of sense.

    Thank you in advance for any help.

    Posted 11 years ago #
  3. anubis5

    I was WAY over complicating this. But I just wanted to write down how I did this in case anyone else ever wants to add the fade effect to the thematic menu.

    First thing is first, add the blend effect to the '.sf-menu a' tag. The jQuery effect adds an overlay div with a class of '.jsblend', so add that class to your css file, and adjust it according to your '.sf-menu a'. Worked like a charm.

    I don't know why I was being an idiot with this. I was just majorly over complicating the matter. Thanks.

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.