ansaurus

Question

Answer 1

A:

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

Christian 2010-01-07 10:56:23

Exactly, except with color and backgroundColor! (I used slightly different code, but still, the same error while trying to do the same thing.) Could this be a Chrome bug, or a jQuery bug? (PS: This is technically not an answer, but I will borrow your code until I get mine up.)

Moshe 2010-01-08 00:10:44

Answer 2

+4 A:

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"&gt;&lt;/script&gt;
<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>

Bernhard Hofmann 2010-01-12 13:21:50

Can you try with the color and background color properties please and let me know how it goes?

Moshe 2010-01-13 00:29:02

Answer 3

+1 A:

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>

Mike 2010-01-12 13:24:16

Your <a> tag is not complete and I think that may have to do with your success. change it to <a href="#">text</a>

Moshe 2010-01-13 00:30:06

It worked with an href just fine too. I suspect the error to be somewhere else.

Mike 2010-01-14 09:13:22

Answer 4

+2 A:

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

Chetan Sastry 2010-01-14 05:20:38

Will this break other things? Why hasn't jQuery implemented this themselves?

Moshe 2010-01-14 18:29:35

@Moshe: I don't know if it breaks other things but even if it did, I'm pretty sure it won't break anything other than the color plugin itself. As for your second question, here's a list of bug reports for the color plugin http://plugins.jquery.com/project/issues/color?categories=bug

Chetan Sastry 2010-01-14 23:19:44

Worked for me on Chrome 5.0.342.5 dev in Ubuntu 9.10, without "breaking other stuff". Thanks.

Alfabravo 2010-03-17 17:08:34

Answer 5

A:

i am having the same trouble with animate in chrome...

oompa_l 2010-07-14 18:04:51

ansaurus

tags:

views:

answers:

jQuery animation issue in Chrome

related questions