Grow your CSS skills. Land your dream job.

Firefox jQuery back button animation issue.

  • # April 29, 2011 at 7:57 pm

    I am using jQuery to animate a color transition on my links, however, in Firefox if I click on a new pages link, and the use the mouse back button it keeps the current page and the previous page’s active state color, in IE it actually switches perfectly, any idea what would cause this in Firefox? I tested in IE8 and Chrome on PC with no problems, Safari PC and Firefox have issues….

    It seems like the animation is getting stuck when the new page loads and it’s keep the previous pages link highlighted.

    Here is my HTML


    < ?php $page = basename($_SERVER); ?>

    Here is the jQuery I am using to control the different menus on the site using the animation

    $(document).ready(function(){
    //Navigation + Header Color Shifting
    $("#sidebar li a, #services-nav li a, #header h2 a, #projects-nav li a").hover(function()
    {
    $(this).stop().animate({color: "#f7941e"}, 800);
    },function()
    {
    if($(this).hasClass("active"))
    {
    $(this).css({color: "#f7941e"});
    } else
    {
    if($(this).is("#header h2 a"))
    {
    $(this).stop().animate({color: "#707070"}, 800);
    } else if($(this).is("#sidebar li a"))
    {
    $(this).stop().animate({color: "#d7d7d7"}, 800);
    } else if($(this).is("#services-nav li a, #projects-nav li a"))
    {
    $(this).stop().animate({color: "#c2c2c2"}, 800);
    }
    }
    });
    });
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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