jquery animate() 在 chrome 和 firefox 中不起作用
Posted
技术标签:
【中文标题】jquery animate() 在 chrome 和 firefox 中不起作用【英文标题】：jquery animate() not working in chrome and firefox 【发布时间】：2015-03-24 23:17:12 【问题描述】：以下 jQuery animate 函数在 chrome 和 Firefox 中不起作用，知道为什么吗？它在 Safari 中完美运行。
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<header>
<div class="logoDiv"><img class="logoIcon" src="KM&T-world.png"></div>
<div><img class="iphone" id="iphoneRight" class="slideLeft" src=""></img></div>
<h1 class="logoTagLine"></h1>
<p class="headerPara"></p>
<h1 class="mainTag"></h1>
<h2 class="secTag"></h2>
</header>
<div class="heart"><img class="heartIcon" src="Heart-ECG.png"></img></div>
<div class="row" class="test">
<div class="col-xs-6 col-md-4"><img class="test" src="globe2.png"></div>
<div class="intoPara"></div>
<div class="col-xs-6 col-md-4"></div>
</div>
<script>
$(function()
$('.iphone').animate(right:300, 1200);
$('.test').animate(bottom: 200, 1200);
);
</script>
</body>
</html>
以上是完整代码。
【问题讨论】：
请发布一个完整的代码示例。right:300 不需要引号。如果您需要除px以外的其他单位，请仅使用引号
@j08691 上面的完整代码
【参考方案1】：
这行得通。
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="iphone" style="background-color: red; width: 200px; position: relative">asdfdasfasdfdasfdas</div>
<div class="test" style="background-color: blue; width: 200px; position: relative">zcv zvcxz vxcvxcz xcvz</div>
<script>
$(function()
$('.iphone').animate(right:'300px', 1200);
$('.test').animate(bottom:'100px', 1200);
);
</script>
</body>
</html>
【讨论】：
以上是关于jquery animate() 在 chrome 和 firefox 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
jQuery .animate() 只在 Chrome 中动画，在其他浏览器中瞬时变化
Chrome, Safari 中的 JQuery .animate() != FF, IE, Opera
jQuery Animate 顶部：在 Chrome 中不起作用
仅在 Chrome 中使用背景固定图像和 jquery.Animate 的错误