728x90
반응형
목차
시각 효과 메서드
지연시간 : 시각적 효과가 나타기이 위한 시간
메시지 : 메소드 수행 후 나타나는 문장
show(), hide()
- show(지연시간, 메시지), 지연시간에 맞게 보여진다.
- hide(지연시간, 메시지), 지연시간에 맞게 사라진다.
🔽 감추기 버튼 클릭시 사진이 target1부터 서서히 사라지며, "이미지가 사라진다" 문구 출력
🔽 보이기 버튼 클릭시 사진이 targer1부터 서서이 보여지며, "이미지가 보인다" 문구 출력
<script>
function showImage(){
$('#target1').show(2000, stmt1);
$('#target2').show(3000, stmt1);
}
function hideImage(){
$('#target1').hide(2000, stmt2);
$('#target2').hide(3000, stmt2);
}
function stmt1(){
$('#p1').text("이미지가 보인다.");
}
function stmt2(){
$('#p1').text("이미지가 사라진다.");
}
</script>
<body>
<!--시각적으로 이미지의 보이기 & 감추기-->
<img id ='target1' style="width: 100px; height: 100px;" src="resource/imgs/strawberries.jpg"/>
<img id ='target2' style="width: 100px; height: 100px;" src="resource/imgs/hatching.png"/> <br/>
<form>
<input type="button" value="보이기" onclick="showImage()" />
<input type="button" value="감추기" onclick="hideImage()" />
</form>
<p id="p1"></p>
</body>
toggle()
- toggle(지연시간,메시지), 스위치처럼 on/off를 반복한다
🔽 버튼을 누르면 <h2>가 보였다가 안보였다를 반복한다.
<head>
<script> //toggle로 메시지 나타내기
$(document).ready(function(){
$('button').click(function(){
$('h2').toggle(2000);
})
});
</script>
</head>
<body>
<h2>Look at me</h2>
<h2 style="display:none">안보인다.</h2>
<button>토글</button>
</body>
fadein() & fadeout() & fadeTo()
- fadein(지연시간, 메시지), 대상이 서서히 나타난다.
- fadeout(지연시간, 메시지), 대상이 서서히 사라진다.
- fadeTo(지연시간, 불투명값, 메시지), 대상의 일부분을 흐리게 하다.
🔽 fadeOut버튼 클릭시 사진이 서서히 안보이면서 사라진다.
🔽 fadein버튼 클릭시 사진이 서서히 보인다.
<script>
function fadein(){
$('#target').fadeIn(2000);
}
function fadeout(){
$('#target').fadeOut(2000);
}
</script>
<body>
<img id="target" src="resource/imgs/hatching.png"/><br/>
<form>
<input type="button" value="fadein" onclick="fadein();"/>
<input type="button" value="fadeout" onclick="fadeout();"/>
</form>
</body>
🔽 fade버튼 클릭시 사진이 흐리게 보인다.
<script>
function fade(){
$('#target').fadeTo(2000, 0.333, stmt1);
}
function stmt1(){
$('#p1').text("이미지가 부분적으로 흐려졌습니다.")
}
</script>
<body>
<img id="target" src="resource/imgs/hatching.png"/><br/>
<form>
<input type="button" value="fade" onclick="fade();"/>
</form>
</body>
728x90
slideUp & slidDown & slideToggle
슬라이딩으로 문자열을 감추거나 보인다.
- slideup(지연시간, 메시지), 문자열을 감추는 함수이다.
- slideDown(지연시간, 메시지), 문자열을 나타내는 함수이다.
- slideToggle(지연시간, 메시지), slideup과 slideDown을 한번에 할 수 있는 함수이다.
🔽 "시간은 금입니다" 글귀가 slideup 버튼클릭시 감춰집니다.
🔽 "시간은 금입니다" 글귀가 slidedown 버튼클릭시 나타납니다.
//slideup(), slidedown()
<script>
function fadein(){
$('#target').fadeIn(2000);
}
function fadeout(){
$('#target').fadeOut(2000);
}
</script>
</head>
<body>
<img id="target" src="resource/imgs/hatching.png"/><br/>
<form>
<input type="button" value="fadein" onclick="fadein();"/>
<input type="button" value="fadeout" onclick="fadeout();"/>
</form>
</body>
//slideToggle()
<script>
$(document).ready(function(){
$("button").click(function(){
$('#first').slideToggle("slow");
});
});
</script>
<body>
<div>
<p id="first">시간은 금입니다.</p>
<p>나는 당신을 믿습니다.</p>
<p>나는 당신을 사랑합니다.</p>
</div>
<form>
<button>토글</button>
</form>
animate()
문자열을 플래시 애니메이션 효과로 나타낸다.
- animate(속성효과, 지연시간, 불투명값, 메시지),
<script>
function animator(){
$("#target").animate({
width: "80%",
opacity : 0.333,
fontSize : "26pt",
marginLeft : "0.5in",
borderWidth : "15px"
}, 2000);
alert("실행완료");
}
</script>
<style>
div{
background: cyan;
width: 100px;
border: 1px solid blue;
}
</style>
<body>
<div id="target">이 문장이 확대되는 애니메이션입니다.</div><br>
<form>
<button onclick="animator();">Animate</button>
</form>
</body>
728x90
반응형
'개발기록 > 자바스크립트 & jQuery' 카테고리의 다른 글
| Javascript Date() 객체, Date 함수 종류 [자바스크립트 도장깨기] (0) | 2022.04.27 |
|---|---|
| jQuery 도장깨기, 배열2 each() / inArray() / merge() / grep() / map() (0) | 2022.04.23 |
| Javascript & jQuery 이벤트란, 이벤트 핸들러 알아보기 (0) | 2022.04.20 |
| jQuery 도장깨기, function 종류 (each, css, append, wrap, clone, val) (0) | 2022.04.19 |
| jQuery 도장깨기, 요소탐색 방법 first / last / nth-child (0) | 2022.04.18 |