jquery animate()가 크롬과 파이어 폭스에서 작동하지 않음

다음 jQuery 애니메이션 기능이 Chrome 및 Firefox에서 작동하지 않는 이유는 무엇입니까? Safari에서 완벽하게 작동합니다.jquery animate()가 크롬과 파이어 폭스에서 작동하지 않음

<!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>

이상은 전체 코드입니다.

출처

2015-01-26 Skywalker

전체 코드 예제를 게시하십시오. – j08691

'{right : 300}'따옴표가 필요하지 않습니다. 'px'가 아닌 다른 단위가 필요할 때만 따옴표를 사용하십시오 –

@ j08691 위의 전체 코드 – Skywalker

이것은 작동합니다.

<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>

출처

2015-01-26 14:28:33

jquery animate()가 크롬과 파이어 폭스에서 작동하지 않음

답변

관련 문제