HTML + CSS + JS/JS 자바스크립트

[JS + jquery] 효과 메서드와 애니메이션 메서드 기초 연습문제 1, 2

초보보 혜진 2021. 11. 1. 11:24
728x90

* 연습문제 1

버튼을 누르면 <h1> 내용 </h1>이 점점 사라지도록 
결과 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> new document </title>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
    $("#btn").on("click", function(){
        $("h1").fadeOut(1000, "linear");
    });
 
 
});
//]]>
</script>
</head>
<body>
 <button id="btn">버튼</button>
 <h1>내용</h1>
</body>
</html>

 

 

* 연습문제 2

버튼을 누르면 50px씩 움직이도록 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> new document </title>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){

    $("#btn").on("click",function(){
        $("#ctx").animate({marginLeft : "+=50px"},500);
    });

});
//]]>
</script>
<style type="text/css">
*{margin:0; padding:0;}
#ctx{width:50px; height:50px; background:yellow;}
</style>
<body>
 <button id="btn">버튼</button>
 <p id="ctx">내용</p>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90