用jQuery动画扩展文本区域

Question

目的

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

使用Javascript

$(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;
    });
});

HTML

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

Answer 1

试试这个。使用类并选择最接近的文本区域进行动画处理。 样本演示

 $(function() { $(".content").focus(function() { $(this).animate({ "height": "85px", }, "fast"); $(this).closest('form').find(".button_block").slideDown("fast"); return false; }); $(".cancel").click(function(event) { $(this).closest('form').find('.content').animate({ "height": "30px", }, "fast"); $(this).closest('form').find(".button_block").slideUp("fast"); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action=""> <textarea class="content"></textarea> <div class="button_block"> <input type="submit" class="button" value=" Share " /> <input type="submit" class='cancel' value=" cancel" /> </div> </form> <form method="post" action=""> <textarea class="content"></textarea> <div class="button_block"> <input type="submit" class="button" value=" Share " /> <input type="submit" class='cancel' value=" cancel" /> </div> </form> <form method="post" action=""> <textarea class="content"></textarea> <div class="button_block"> <input type="submit" class="button" value=" Share " /> <input type="submit" class='cancel' value=" cancel" /> </div> </form> 

Answer 2

在这里您可以找到解决方案https://jsfiddle.net/d71g96cx/

 $(function() { $(".content").focus(function(){ $(this).animate({"height": "85px",}, "fast" ) .siblings('div.button_block') .slideDown("fast"); return false; }); $('input[value="Cancel"]').click(function(){ $(this).parent('div.button_block') .slideUp() .siblings('textarea.content') .animate({"height": "30px"}, "fast" ); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action=""> <textarea class="content"></textarea> <div class="button_block"> <input type="submit" id="button" value="Share "/> <input type="submit" id='cancel' value="Cancel" /> </div> </form> <form method="post" action=""> <textarea class="content"></textarea> <div class="button_block"> <input type="submit" id="button" value="Share "/> <input type="submit" id='cancel' value="Cancel" /> </div> </form> <form method="post" action=""> <textarea class="content"></textarea> <div class="button_block"> <input type="submit" id="button" value="Share "/> <input type="submit" id='cancel' value="Cancel" /> </div> </form> 

希望这会帮助你。