Grow your CSS skills. Land your dream job.

Fading Hover Rollover

  • # January 22, 2010 at 11:47 am

    Just implemented this code into my site:

    http://css-tricks.com/color-fading-menu-with-jquery/

    I was wondering if anyone could tell me where the timing for the background color of the hover is? I can change the milliseconds of the actual TEXT changing (in the main.js file) , but this doesn’t seem to affect the background color timing. I just want the entire transition to be faster.

    thanks

    # January 22, 2010 at 8:58 pm

    I have highlighted the background fading speeds in Red. Remember, when switching from a text speed (i.e ‘slow’ or ‘fast’) to milliseconds, you no longer use quotation marks.

    var hoverColour = "#FFF";
    //when the dom has loaded
    $(function(){
    //display the hover div
    $("div.hoverBtn").show("fast", function() {
    //append the background div
    $(this).append("<div></div>");
    //on link hover
    $(this).children("a").hover(function(){
    //store initial link colour
    if ($(this).attr("rel") == "") {
    $(this).attr("rel", $(this).css("color"));
    }
    //fade in the background
    $(this).parent().children("div")
    .stop()
    .css({"display": "none", "opacity": "1"})
    .fadeIn("fast");
    //fade the colour
    $(this) .stop()
    .css({"color": $(this).attr("rel")})
    .animate({"color": hoverColour}, 350);
    },function(){
    //fade out the background
    $(this).parent().children("div")
    .stop()
    .fadeOut("slow");
    //fade the colour
    $(this) .stop()
    .animate({"color": $(this).attr("rel")}, 250);
    });
    });
    });

    Also, sorry for having not having it in code, I can’t change the text color with the code tag on it as well. They should fix that.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".