<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1" style="width: 80px; height: 80px; background-color: red"></div>
<div id="div2" style="width: 80px; height: 80px; background-color: green;"></div>
<div id="div3" style="width: 80px; height: 80px; background-color: blue;"></div>
<br><br><br>
<img alt="" src="nature.jpg" class="pic">
//사진이 있다
<br><br><br>
<button id="fadein">fade in</button>
<button id="fadeout">fade out</button>
<button id="toggle">toggle</button>
<script type="text/javascript">
//speed 는 slow ,fast 를 설정할 수 있고 밀리초를 사용 할 수 있다.
fadeIn,fadeOut,fadeToggle( speed,callback ); //콜백은 fade 가 다 실행되고 난 후 실행될 함수
fadeTo( speed,opacity,callback );
$(function () {
// alert("jquery");
var speed = 3000; //3000밀리초 -> 3초
$("#fadein").click(function () {
$("#div1").fadeIn(speed); //점점 뚜렷해진다
$("#div2").fadeIn(speed);
$("#div3").fadeIn(speed);
});
$("#fadeout").click(function () {
$("#div1").fadeOut(speed);//점점 사라진다
$("#div2").fadeOut(speed);
$("#div3").fadeOut(speed);
});
$("#toggle").click(function () {
$("#div1").fadeToggle(speed); //fadeout ,fadein 두 함수를 토글시킴
$("#div2").fadeToggle(speed);
$("#div3").fadeToggle(speed);
});
//참고 fadeto 는 불투명도를 설정할 수 있다. 값은 0~ 1 사이 소수점으로
/* $(".pic").click(function () {
$(".pic").css("border", "solid 5px #0000ff");
}); */
$(".pic").click(setBorder);
});
function setBorder() {
$(this).css("border", "solid 5px #00ff00");
}
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
| Jquery(7) 값 복사하기,radio,getter,setter,keyCode (0) | 2018.08.08 |
|---|---|
| Jquery(6) 2차원배열, td:eq(index) ,for문 (0) | 2018.08.08 |
| Jquery(4) 기본 focus,blur,show,toggle,dbclick,hover,mousedown, mouseup (0) | 2018.08.06 |
| Jquery(3) 기본 hide,child,nth (0) | 2018.08.06 |
| Jquery(2) 기본 click,mouseover,mouserout (0) | 2018.08.06 |