jquery animate() 在 chrome 和 firefox 中不起作用答案

【问题标题】：jquery animate() not working in chrome and firefoxjquery animate() 在 chrome 和 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 上面的完整代码

标签： jquery google-chrome jquery-animate

【解决方案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>

【讨论】：