더보기
/*
- fadeIn(speed, callback);
- fadeOut(speed, callback);
- fadeToggle(speed, callback);
- fadeTo(speed,opacity, callback)
- fade는 투명도를 0으로 한 후, 안보이게 하거나(display:none)
보이게한 후(display:지정속성) 투명도를 0에서 지정투명도까지 보여주게 한다.
*/
서서히 사라지는 느낌처럼 보여짐
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
$('.box1').fadeIn(1000);
});
$('#btn2').click(function(){
$('.box1').fadeOut(1000);
});
$('#btn3').click(function(){
$('.box1').fadeToggle(1000);
});
$('#btn4').click(function(){
$('.box1').fadeTo(1000,0.5);
})
})
</script>
</head>
<body style="background-color: black;">
<button id="btn1">in</button>
<button id="btn2">out</button>
<button id="btn3">toggle</button>
<button id="btn4">to</button>
<div class="box1" style="height: 50px; background: yellow;"></div>
<div class="box2" style="height: 50px; background: red;"></div>
</body>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_rolling예제 (0) | 2021.06.22 |
|---|---|
| JQ_animate(애니메이션 효과) (0) | 2021.06.22 |
| JQ_효과(hide, show, toggle) (1) | 2021.06.22 |
| JQ_Form event(폼 이벤트) (1) | 2021.06.22 |
| JQ_keyboard event(키보드 이벤트) (1) | 2021.06.22 |