使用jQuery动画扩展textarea

Question

目的

我希望以各种形式为我的所有textareas制作动画。目前我只能动画一个因为我正在使用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

试试这个。使用类并选择最接近动画的textarea。 示例演示

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/d71g96cx/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这会对你有所帮助。