Animate(right: 0) 在 Chrome 和 Opera 中无法正常工作
Posted
技术标签:
【中文标题】Animate(right: 0) 在 Chrome 和 Opera 中无法正常工作【英文标题】：Animate(right: 0) not working properly in Chrome and OperaAnimate(right: 0) 在 Chrome 和 Opera 中无法正常工作 【发布时间】：2015-04-14 15:46:48 【问题描述】：我尝试仅使用 jQuery 让图像从左向右滑动，它与 Firefox 上的 .animate(right: 0, 1500) 完美配合，但在 Chrome 和 Opera 上却不行（虽然没有尝试过其他浏览器）。
这是一个代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Slide this squirrel</title>
</head>
<body>
<div style="position:relative;margin:1%;padding:1%;border:1px solid black">
<img id="squirrel" src="squirrel.jpg" style="position:absolute;" />
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function()
$("#squirrel").animate(right: 0, 5000);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您需要将100% 分配给CSS 文件中#squirrel 的right 属性。
HTML：
<div style="position:relative;margin:1%;padding:1%;border:1px solid black">
<img id="squirrel" src="http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/squirrel_2_line_art.png" style="position:absolute;" />
</div>
JS：
$(document).ready(function()
$("#squirrel").animate(right: 0, 5000);
);
CSS：
#squirrel
right:100%;
我为你创建了一个JSFiddle。
网址：http://jsfiddle.net/m99bybnp/
编辑：
我在JS 文件中做了一个小改动。
$(document).ready(function()
// We calculate the width which we need for the wanted displacement
var width_Animate = $('#container_Squirrel').width() - $('#squirrel').width() ;
$("#squirrel").animate(left: width_Animate, 5000);
);
新的 JSFiddle 网址：http://jsfiddle.net/m99bybnp/2/
【讨论】：
谢谢，它修复了动画问题，但现在松鼠图像的最左侧与 div 内容器的最左侧（当然减去填充）不对齐。相反，松鼠被隐藏了，因为右边太多了...... 伟大的第二小提琴就像一个魅力！知道为什么 Chrome 和 Opera 的行为如此而不是 Firefox 吗？它是 Webkit / Gecko 的区别吗？ （您能否在答案中添加更改以便我接受？） @IamZesh 每个浏览器都会解释特定表单的 HTML。看这个链接，有意思：***.com/a/1182888/4359029 非常感谢您的帮助！以上是关于Animate(right: 0) 在 Chrome 和 Opera 中无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章