Javascript 使用jQuery设置扩展文本区域的动画 客观的

我想以各种形式设置所有文本区域的动画。目前我只能制作一个动画，因为我使用的是ID选择器

Javascript HTML

---

尝试此操作。使用类并选择最近的文本区域进行动画制作。 示例演示

$（函数（）{
$（“.content”）.focus（函数（）{
$（此）。设置动画({
“高度”：“85px”，
}“快”）；
$（this）.closest（'form'）。find（'button_block'）。slideDown（“fast”）；
返回false；
});
$（“.cancel”）。单击（函数（事件）{
$（this）。最近的（'form'）。查找（'content'）。制作动画({
“高度”：“30px”，
}“快”）；
$（this）.closest（'form'）.find（'button_block'）.slideUp（“fast”）；
返回false；
});
});
给你一个解决方案


$（函数（）{
$（“.content”）.focus（函数（）{
$（this.animate（{“height”：“85px”，}，“fast”）
.同级（'div.button\u block'）
.向下滑动（“快速”）；
返回false；
});
$（'input[value=“Cancel”]”）。单击（函数（）{
$（this.parent（'div.button\u block'））
.slideUp（）
.sibbins（'textarea.content'）
.animate（{“height”：“30px”}，“fast”）；
返回false；
});
});

感谢所有的回答，特别感谢@sujith，top answer谢谢你的回答兄弟，但我认为如果在第二个文本区域使用，按钮share/cancel不会显示。感谢您的回复：D@catraabiyanayusuf . 更新了答案，看一看。
$(function() {
    $("#content").focus(function(){
        $(this).animate({"height": "85px",}, "fast" );
        $("#button_block").slideDown("fast");
        return false;
    });

    $("#cancel").click(function(){
        $("#content").animate({"height": "30px",}, "fast" );
        $("#button_block").slideUp("fast");
        return false;
    });
});

<form method="post" action="">
    <textarea  id="content"></textarea>
    <div id="button_block">
        <input type="submit" id="button" value=" Share "/>
        <input type="submit" id='cancel' value=" cancel" />
    </div>
</form>