본문 바로가기
웹프로그래밍/jQuery

jquery animate

by 폴더맨 2024. 6. 9.
<html>
<head>
<title> 12장 jquery animate </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
  });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

 

 

세상을 링크하라!!! 모든 링크를 한 자리에...
링크닷컴: https://linkdotcom.mycafe24.com/

 

유용한 링크, 링크닷컴 #무료 #링크사이트 #링크사이트

컴퓨터 및 일반 유용한 링크들을 모아 놓았습니다. 지금 바로 확인하세요!

linkdotcom.mycafe24.com

 

 

'웹프로그래밍 > jQuery' 카테고리의 다른 글

jQuery  (0) 2024.06.09