-
211005_button(hide,show,toggle,slide,fade)JQuery 2021. 10. 5. 16:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<button type="button" id="btn1">Hide</button>
<button type="button" id="btn2">Show</button>
<button type="button" id="btn3">Toggle</button>
<br>
<button type="button" id="btn4">SlideUp</button>
<button type="button" id="btn5">SlideDown</button>
<button type="button" id="btn6">SlideToggle</button>
<br>
<button type="button" id="btn7">FadeOut</button>
<button type="button" id="btn8">FadeIn</button>
<button type="button" id="btn9">FadeToggle</button>
<button type="button" id="btn10">FadeTo</button>
<div id="msg">Have a Nice Day!!!</div>
<img alt="" src="../cat/cat1.JPG" id="img1" width="400">
<!-- 이벤트 -->
<script type="text/javascript">
$("#btn1").click(function() {
$("#msg").hide();
$("#img1").hide();
});
$("#btn2").click(function() {
$("#msg").show();
$("#img1").show();
});
$("#btn3").click(function() {
$("#msg").toggle();
$("#img1").toggle();
});
$("#btn4").click(function() {
$("#msg").slideUp('fast');
$("#img1").slideUp('fast');
});
$("#btn5").click(function() {
$("#msg").slideDown('fast');
$("#img1").slideDown('fast');
});
$("#btn6").click(function() {
$("#msg").slideToggle('fast');
$("#img1").slideToggle('fast');
});
$("#btn7").click(function() {
$("#msg").fadeOut('slow');
$("#img1").fadeOut('slow');
});
$("#btn8").click(function() {
$("#msg").fadeIn();
$("#img1").fadeIn();
});
$("#btn9").click(function() {
$("#msg").fadeToggle();
$("#img1").fadeToggle();
});
$("#btn10").click(function() {
/* 3초동안 반투명된 후 css함수 실행 */
$("#msg").fadeTo(3000, 0.5, function() {
$("#msg").css("border", "10px dotted orange");
});
/* 3초동안 20%투명도된 후 css함수로 opacity투명도 다시 1로 실행 */
$("#img1").fadeTo(3000, 0.2, function() {
$(this).css("opacity", "1");
});
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
211006_div,click,hide,show (0) 2021.10.06 211005_animate (0) 2021.10.05 211005_list,hover,slideUp,slideDown,children (0) 2021.10.05 211005_list,click,hide,show (0) 2021.10.05 211005_addClass,removeClass (0) 2021.10.05