Chrome中的jQuery动画问题 [英] jQuery animation issue in Chrome
问题描述
我在jQuery中使用jQuery 1.3.2和jQuery颜色插件来动画化一个元素。我在同时动画'color'和'backgroundColor'属性。在IE8和FF它的工作很好。 Chrome动画mousehover颜色，然后停止。
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的开发人员工具说明了一些未定义的内容。我知道我在这里有些模糊，也许这是一个已知的问题？
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>
编辑：
@Bernhard Hofmann - 什么意思是您选择的属性的问题？请详细说明。
@Bernhard Hofmann - What do you mean "issues with the properties you've chosen"? Please elaborate.
推荐答案
Chrome似乎有几个问题与您选择的属性。我设法使用鼠标进入和离开事件在Chrome中的动画工作。
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>
这篇关于Chrome中的jQuery动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
