Home/ Questions/Q 540877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T10:17:08+00:00

I was animating an a element in jQuery using jQuery 1.3.2 and jQuery color

  • 0

I was animating an a element in jQuery using jQuery 1.3.2 and jQuery color plugin. I was animating the ‘color’ and ‘backgroundColor’ properties at the same time. In IE8 and FF it worked just fine. Chrome animated the mousehover color and then stopped. The background stayed the same and the mouseout did not undo the effect as it should have.

Chrome’s developer tools said something about something being undefined. I know that I’m being somewhat vague here, perhaps this is a known issue?

EDIT – Code(, finally!):

<script>
  $(document).ready(function(event){
    $(".nav a").hover(function(event){
      $(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
    },function(event){
      $(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
    });
  });
</script>

EDIT:

@Bernhard Hofmann – What do you mean “issues with the properties you’ve chosen”? Please elaborate.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It would seem that Chrome has a few issues with the properties you’ve chosen. I managed to get the animation working using mouse enter and leave events in Chrome. Here’s the script and mark-up for those wanting to fiddle and have a go as well.

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(event){
                $(".nav a").
                mouseenter(function(){$(this).animate({fontSize:"2em"}, 900);}).
                mouseleave(function(){$(this).animate({fontSize:"1em"}, 900);});
            /*
                $(".nav a").hover(function(){
                    $(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
                },function(){
                    $(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
                });
            */
            });
        </script>
    </head>
    <body>
        <div class="nav" style="color:#000;background:#cfc;padding:2em 2em 2em 2em;margin:2em 2em 2em 2em;">
            <a href="http://stackoverflow.com/questions/2010576/jquery-animation-issue-in-chrome" id="a1">StackOverflow</a>
        </div>
    </body>
</html>
    • 0