페이지로드시 자동으로 사각형의 너비 애니메이션 적용 (단추 누름 없음)

저는 jquery를 처음 사용했습니다. 간단한 너비 애니메이션을 만들려고합니다. 버튼을 누르면 정상적으로 작동합니다. 그러나, 내가 원하는 것은 애니메이션이 페이지가로드되는 즉시 자동으로 발생하기 위해서입니다. 나는 여기에 페이지로드시 자동으로 사각형의 너비 애니메이션 적용 (단추 누름 없음)

내가 지금까지 가지고 무엇을 ... 예를 들어 사냥,하지만 당신은 내가 버튼을 사용하지 않는 예를 찾을 수 있다고 생각 할 수있다 :

된 index.html을

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Anim</title> 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="anim.js"></script> 
</head> 
<body> 
    <button id="button1">Grow</button> 
    <div style="background:green; 
       height:250px; width:1px; 
       position:absolute;"> 

    </div> 
</body> 
</html>

anim.js

$(document).ready(function() { 

    $("#button1").click(function() { 
    $("div").animate({height: '250px',width: '+=300px'},4000); 
    }); 

});

어떻게 버튼을 사용하지 않고 애니메이션을 트리거 할 수 있습니까? 감사.

출처

2017-11-12 Lastmboy

필요한 기능. $ (document) .ready()이 함수는 페이지를 열 때 사용됩니다.

이렇게 jQuery 코드를 가져 오십시오.

$(document).ready(function() { 
    $("div").animate({ 
     height: '250px', 
     width: '+=300px' 
    }, 4000); 
});

당신은 HTML 코드에서 버튼을 제거 할 수 있습니다;

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Anim</title> 
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
     <script src="anim.js"></script> 
    </head> 
    <body> 
     <div style="background:green;height:250px;width:1px;position:absolute;"></div> 
    </body> 
</html>

$(document).ready(function() { 
 
    $("div").animate({ 
 
     height: '250px', 
 
     width: '+=300px' 
 
    }, 4000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background:green;height:250px;width:1px;position:absolute;"></div>

출처

2017-11-12 19:42:00

또는 _ $ (문서) .ready (함수() {_ 인 _ $ (함수() {_가 –

딱! 감사합니다! – Lastmboy

@sercan을위한 속기 -arğa, 어떤 div가 움직일지를 지정하는 방법이 있습니다. 이제는 div 블록을 더 추가하면 모두 움직입니다. 어떻게 애니메이션을 만들 것인지 지정할 수 있습니까? – Lastmboy

페이지로드시 자동으로 사각형의 너비 애니메이션 적용 (단추 누름 없음)

답변

관련 문제