admin管理员组文章数量:1343904
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.
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 Improve this question edited Jan 14, 2010 at 4:39 Moshe asked Jan 6, 2010 at 2:17 MosheMoshe 58.1k80 gold badges277 silver badges430 bronze badges 7- 2 If you could provide some code we might be able to help more. – Dan Herbert Commented Jan 6, 2010 at 2:29
- I know, let me see what I can do... – Moshe Commented Jan 6, 2010 at 4:03
- I've also had an issue or two with jQuery under Chrome - I'm curious to see what the answer is here. – Chris Tonkinson Commented Jan 10, 2010 at 1:35
- Can you post what version of Chrome you've tested in. Your code seems to work fine for me in 3.0.195.24 and 3.0.195.38 on Win XP. – Rob Van Dam Commented Jan 16, 2010 at 4:28
- @Rob - I am on Vista Home Premium x64 and I think I was using version 4, gonna confirm and get back to you. – Moshe Commented Jan 17, 2010 at 0:03
4 Answers
Reset to default 5 +50It 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./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./questions/2010576/jquery-animation-issue-in-chrome" id="a1">StackOverflow</a>
</div>
</body>
</html>
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./ekoli
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>
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
本文标签： javascriptjQuery animation issue in ChromeStack Overflow
版权声明：本文标题：javascript - jQuery animation issue in Chrome - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743739907a2530696.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论