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.