Text box zooming and moving up and down based on jQuery

  • 2020-03-30 04:23:48
  • OfStack

Want to make your web pages more cool, want to make your comments more interactive, so please take a closer look at this code.

JQuery code:


 $(function(){
          var $comment = $('#comment');
          $('.bigger').click(function(){
              if(!$comment.is(":animated")){
                  if($comment.height() < 500){
                      //$comment.height($comment.height() + 50);
                      $comment.animate({height:"+=50"},400);
                  }
              }
          });
           $('.smaller').click(function(){
               if(!$comment.is(":animated")){
                   if($comment.height() > 50){
                       //$comment.height($comment.height() - 50);
                       $comment.animate({height:"-=50"},400);
                   }
               }
           });
           $('.up').click(function(){
              if(!$comment.is(":animated")){
                  $comment.animate({scrollTop:"-=50"},400);
              }
           });
           $('.down').click(function(){
               if(!$comment.is(":animated")){
                   $comment.animate({scrollTop:"+=50"},400);
               }
           });
       }); 

HTML code:


<div class="msg">
       <div class="msg_caption">
           <span class="bigger"> amplification </span>
           <span class="smaller"> narrow </span>
           <span class="up"> upward </span>
           <span class="down"> down </span>
       </div>
        <div>
            <textarea id="comment" rows="8" cols="20">
                 Utility bill utility bill toner law safin sofa relax sofa
                When toner flies sofa hair sofa hair hair
                Utility bill utility bill toner law safin sofa relax sofa
                When toner flies sofa hair sofa hair hair
            </textarea>
        </div>
    </div>

The CSS code:


.bigger , .down , .up , .smaller{
    background-color: #f1a55c;

The code is here. I won't say much about how to use it and where to use it.


Related articles: