본문 바로가기

World Wide Web/jquery

jquery로 font-size, color를 animate 시켜보기

  <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>