<style type="text/css">
.btn{width:100px; height:100px; background-color:#ccc; cursor:pointer;}
.btn.on{width:100px; height:100px; background-color:#048d3b; cursor:pointer;}
</style>
<script type="text/javascript">
$(function(){
jQuery(".btn").click(function(){
if(jQuery(this).hasClass("on")) {
jQuery(this).removeClass("on");
jQuery(".font").animate({fontSize:"16px", color:"#000"}, 600);
} else {
jQuery(this).addClass("on");
jQuery(".font").animate({fontSize:"30px", color:"#FF0000"}, 600);
}
})
})
</script>
</head>
<body>
<div class="btn"></div>
<div class="font">
kanarazu asuha kurukara
</div>
</body>
'World Wide Web > jquery' 카테고리의 다른 글
window scroll 막고 해제하기(IE9 이상) (0) | 2014.11.18 |
---|---|
stopPropagation과 preventDefault의 차이점 (0) | 2014.11.17 |
[플러그인] 제이쿼리로 곡선 모션 표현하기 (0) | 2014.05.07 |
다른 페이지로 벗어날때 인터벌 정지시키기 (0) | 2014.05.07 |
jquery로 css 백그라운드 이미지 변경 (2) | 2014.04.03 |