2012-07-26 88 views
0

当试图将'right'属性从px中的值更改为百分比值时,jquery-ui switchClass完成的动画出现问题。该问题只发生在Chrome浏览器(在FireFox或IE下运行)。jquery-ui switchClass在Chrome下失败

动画应该只是将div的正确属性从'90px'更改为'20%',但div首先会转到屏幕的其他部分。当我查看调试工具时,px似乎被解释为%:值的顺序是90px,89%,88%,... 21%,20%。

下面的代码重新产生此问题:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> 
     <style> 
      .class1 {width:100px; height:50px; position:absolute; right:90px; background-color:#F9EDBE;} 
      .class2 {width:100px; height:50px; position:absolute; right:20%; background-color:#F9EDBE;} 
     </style> 
    </head> 
    <body> 
     <div id="myDiv" class="class1" onclick="$('#myDiv').switchClass('class1', 'class2', 5000);">Click me</div> 
    </body> 

在此先感谢您的帮助。

回答

0

您可能会尝试使用'this'而不是jQuery选择器。还要尝试添加与'id'相同值的'name'属性。

+0

谢谢,但选择器正确地找到元素和switchClass被调用。问题在于div移动到屏幕的另一部分,而不是从第一个位置顺利地移动到第二个位置。 – user1553928 2012-07-26 08:46:35