button을 눌렀을 때 노란색 box가 숨겨지거나 보이게 되도록 해보겠다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step03_effect.jsp</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<div class="box"></div>
<script>
$("#hideBtn").on("click", function(e){
$(".box").css("display", "none");
});
$("#showBtn").on("click", function(e){
$(".box").css("display","");
})
</script>
</body>
</html>
위 코드 말고 이런 동작을 해주는 메서드가 따로 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step03_effect.jsp</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<div class="box"></div>
<script>
$("#hideBtn").on("click", function(e){
//$(".box").css("display", "none");
$(".box").hide();
});
$("#showBtn").on("click", function(e){
//$(".box").css("display","");
$(".box").show();
})
$("#toggleBtn").on("click", function(){
$(".box").toggle();
});
</script>
</body>
</html>
.hide();
.show();
.toggle(); //스위치 처럼 껐다 켰다를 할 수 있다.
이를 이용해 함수를 만들수도 있다.
아래에 있는 .show()와 .toggle()에도 똑같이 적용된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step03_effect3.jsp</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<div class="box"></div>
<script>
$("#hideBtn").on("click", function(){
$(".box").fadeOut(1000, function(){
alert("호엥");
});
});
$("#showBtn").on("click", function(){
$(".box").fadeIn({
duration:2000,
complete:function(){
alert("호에에엥");
}
});
});
$("#toggleBtn").on("click", function(){
$(".box").fadeToggle();
});
</script>
</body>
</html>
위의 코드는
#hideBtn은 1초 후에 알림창으로 "호엥"출력
#showBtn은 2초 후에 알림창으로 "호에에엥"출력
#toggleBtn은 꺼졌다 켜졌다
하는 동작을 해준다.
css3에서는 트랜지션, 애니메이션 동작으로 쉽게 구현할 수 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/Step03_effect3.jsp</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
/* transition 효과를 줄 수 있는 모든 (all) css속성에 대해서 1초(1s)동안 일정한 비율(linear)로
적용을 시켜라
*/
transition: all 1s linear;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
</head>
<body>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<button id="moveBtn">움직이기</button>
<button id="boveBtn2">움직이기2</button>
<button id="moveBtn3">움직이기3</button>
<div class="box"></div>
<div class="box2"></div>
<script>
$("#moveBtn3").on("click", function(){
$(".box2").css("margin-left", "100px")
});
/*
1. 움직이기 버튼을 눌렀을 때, .box div를 오른쪽으로 100px움직이도록 해 보세요
단, 1초동안 진행되도록
*/
$("#moveBtn").on("click", function(){
let mLeft=0;
//10/1000초 마다 한번씩 호출되는 함수 안에서
/* setInterval(function(){
mLeft += 1;
if(mLeft>=101){
return;
}
$(".box").css("margin-left", mLeft+"px");
},10);
}); */
// 10/1000초 마다 한번씩 호출되는 함수 안에서 .box를 움직이기
let seq = setInterval(function(){
mLeft += 1;
$(".box").css("margin-left", mLeft+"px");
if(mLeft == 100){
//인터발의 순서값(sequence)값을 이용햇 취소하기
clearInterval(seq);
}
},10);
$("#mobeBtn2").on("click", function(){
$(".box").animate({
marginLeft:"+=100px"
}, 1000);
})
$("#hideBtn").on("click", function(){
$(".box").fadeOut(1000, function(){
alert("호엥");
});
});
$("#showBtn").on("click", function(){
$(".box").fadeIn({
duration:2000,
complete:function(){
alert("호에에엥");
}
});
});
$("#toggleBtn").on("click", function(){
$(".box").fadeToggle();
});
</script>
</body>
</html>
'수업내용' 카테고리의 다른 글
20230703 이미지갤러리 만들기 (0) | 2023.07.03 |
---|---|
20230703 댓글 기능 구현 (0) | 2023.07.03 |
20230629 jQeury (0) | 2023.06.29 |
20230628 수업내용 Up/DouwnloadFile🤣🤣🤣 (0) | 2023.06.28 |
20230628 수업내용🫡🫡🫡 (0) | 2023.06.28 |
댓글