Implementation of text box scaling and up-down moving function based on jquery _jquery

Want to make your Web page more cool, want to make your comments more interactive, then please carefully study the next code.

jquery Code:

Copy Code code as follows:

$ (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:

Copy Code code as follows:

<div class= "MSG" >
<div class= "Msg_caption" >
<span class= "bigger" > Amplification </span>
<span class= "Smaller" > Shrink </span>
<span class= ' up ' > Up </span>
<span class= "Down" > Downward </span>
</div>
<div>
<textarea id= "comment" rows= "8" cols= ">"
Water, electricity, electricity, toner, safin sofa, relax, relax, sofa.
When the skin water fly sofa hair sofa hair Hair
Water, electricity, electricity, toner, safin sofa, relax, relax, sofa.
When the skin water fly sofa hair sofa hair Hair
</textarea>
</div>
</div>

CSS code:

Copy Code code as follows:

. Bigger,. Down,. Up,. smaller{
Background-color: #f1a55c;
}

Code, how to use, where to use, I do not say more, small partners free play it.