jquery animate() 在 chrome 和 firefox 中不工作

Question

以下 jQuery 动画功能在 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>

以上是完整代码。

Answer 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() not working in chrome and firefox

jquery

google-chrome

jquery-animate