WEB/JQuery

[JQuery] custom- animate

애플쩀 2022. 6. 10. 16:52 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.10 16:46:52</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    div {
      background-color: #bca;
      width: 100px;
      border: 1px solid green;
    }
    </style>
    </head>
<body>
<h3>ex07.html</h3>
<pre>
    jquery효과
    basics: show() , hide(), toggle()
    fading: fadeIn(), fadeOut(), fadeToggle(), fadeTo()
    slide: .slideUp(), .slideDown(),.slideToggle()
    custom : animate()
</pre>

<button id="go">&raquo; Run</button>
<div id="block">Hello!</div>
 
<script>
// Using multiple unit types within one animation.
 
//id가 go인것을 클릭하였을 때  이벤트핸들러 호출
$( "#go" ).click(function() {
    //id가 block인것 애니메이션 효과를 1.5초동안 준다. 
  $( "#block" ).animate({
      //css 코딩 
    width: "70%", //부모의 70퍼센트 까지 키움 
    opacity: 0.4, //투명도 0.4
    marginLeft: "0.6in", //왼쪽여백을 0.6인치띄우기 
    fontSize: "3em", //폰트사이즈 3배 16*3=48px
    borderWidth: "10px" //테두리 굵기를 10px 
  }, 1500 );
});
</script>
 
</body>
</html>

 

저작자표시 (새창열림)