jQuery animation issue in Chrome

问题

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.

回答1:

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>

回答2:

This seems to be a bug with the color animation plugin with webkit browsers with their rgba(r,g,b,opacity) format for background color style.

The fix is simple, just add these lines in the appropriate place inside the getRGB(color) function of the plugin.

// Look for rgba(num,num,num,num)
if (result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
    return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

EDIT: Here is a working version with the fix http://jsbin.com/ekoli

回答3:

Can you provide some HTML? I tried out with Google Chrome 4 BETA on Mac OS and Chrome 3 on XP and it worked as intended.

The HTML I used is as follows

<head>
   <!-- These are my local jquery files. Use yours or the ones from Google -->
   <script src="/osr/javascript/dev/librarys/jquery.js" type="text/javascript"></script>
   <script src="/osr/javascript/dev/librarys/jquery-ui/js/jquery-ui.js" type="text/javascript"></script>
   <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>
</head>

<body>
   <div class="nav">
      <a>aighosvaovhaovuho</a>
   </div>
</body>

回答4:

I have the same issue, using jQuery.animate Works fine in FF, IE 7 & 8

The code..

$(document).ready(function(){  
    jQuery.noConflict();
    jQuery('.boxgrid.caption').hover(function(){
    var s = jQuery(".cover", this).stop(); 
        s.animate({width: "50%"},{queue:false,duration:300});                               
        jQuery(".cover", this).stop().animate({top: "180px"},{queue:false,duration:300});
    }, function() {  
        jQuery(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
    });

});

Produces:

ERROR : (from chrome dev tool) : Uncaught TypeError: Cannot set property 'width' of undefined

来源：https://stackoverflow.com/questions/2010576/jquery-animation-issue-in-chrome

标签

javascript

jquery

cross-browser

google-chrome