JQuery
-
211006_div,click,hide,showJQuery 2021. 10. 6. 14:48
DOCTYPE html> Insert title here .red{color: red;} .green{color: green;} .blue{color: blue;} /* 그냥 b만 써도 되나 관계공부를 위해 */ /* div의 content red,green,blue를 한꺼번에 부를려면 공통단어인 content */ div.content>b{ cursor: pointer; font-family: 'Nanum Pen Script'; font-size: 25pt; } /* 그냥 h5로 해도 됨 */ div.answer>h5 { text-indent: 30px; /* 들여쓰기 */ } $(function() { //댓글숨기기 $("div.answer").hide(); //내용 클릭시 그 내용의 댓글만 보이고 ..
-
211005_animateJQuery 2021. 10. 5. 17:04
DOCTYPE html> Insert title here #one{ position: relative; width: 50px; height: 50px; background-color: pink; border: 1px solid magenta; } $("#img1").animate({width: "200px",opacity: "0.5"},"slow"); $("#img1").animate({width: "100px",opacity: "1"},"slow",function(){ //애니메이션이 끝난후 처리 //alert("애니메이션 종료~"); $(this).after("THE END"); }); $("#one").animate({left:"+=60"},2000).animate({borderWidth: "10p..
-
211005_button(hide,show,toggle,slide,fade)JQuery 2021. 10. 5. 16:31
DOCTYPE html> Insert title here Hide Show Toggle SlideUp SlideDown SlideToggle FadeOut FadeIn FadeToggle FadeTo Have a Nice Day!!! $("#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('f..
-
211005_list,hover,slideUp,slideDown,childrenJQuery 2021. 10. 5. 16:08
DOCTYPE html> Insert title here a { text-decoration: none; } ul li { list-style: none; } li.main{ float: left; } li.main>a { display: block; width: 180px; color: gray; font-weight: bold; font-family: 'Nanum Pen Script'; } li.main>a:hover{ color: orange; } ul.sub { margin-left: 0; font-size: 13pt; font-family: 'Nanum Pen Script'; margin-top: 15px; } ul.sub>li>a { display: block; width: 180px; hei..
-
211005_list,click,hide,showJQuery 2021. 10. 5. 16:06
DOCTYPE html> Insert title here div.sist { position: absolute; left: 300px; width: 250px; height: 300px; border: 2px groove gray; border-radius: 30px; top: 100px; } ul li{ list-style: none; } ul.menu>li { font-size: 2em; font-family: 'Nanum Pen Script'; font-weight: bold; cursor: pointer; } ul.submenu>li { font-size: 24pt; font-family: 'Oswald', sans-serif; } ul.submenu>li:hover { background-col..
-
211005_addClass,removeClassJQuery 2021. 10. 5. 15:24
DOCTYPE html> Insert title here ul,li { list-style: none; padding: 0; margin: 0; } ul li{ float: left; width: 150px; height: 50px; line-height: 50px; text-align: center; border: 1px solid tomato; margin: 0 5px; } .bg{ background: tomato; color: #fff; } 메뉴1 메뉴2 메뉴3 메뉴4 $("ul li").hover(function() { $(this).addClass("bg"); }, function() { $(this).removeClass("bg"); });
-
211005_fadeout,fadeinJQuery 2021. 10. 5. 14:40
DOCTYPE html> Insert title here body,ul,li{ margin: 0px; padding: 0px; } div#logo { width: 250px; height: 130px; margin: 100px auto; cursor: pointer; } ul #list { width: 900px; margin: 50px auto; } li { list-style: none; float: left; cursor: pointer; width: 150px; height: 230px; margin-left: 50px; } //각각의 이미지 클릭시 사라지게 $("li img").click(function() { $(this).fadeOut(); }); //제목 누르면 다시 이미지 나타나게 하면서..