javascript - 无法更改 div 尺寸

Question

我有这个 div:

当您单击按钮时，div 会通过设置其高度和宽度的动画来增大:

$("#addquestionstoset").button().click(function(){
  //only show set if it is currently hidden
  var clickedcards = getClickedCardIDs();
  if ($(".setinprogress").css("display") === "none") {
      $(".setinprogress").css("display", "block");
  }
  setsize += clickedcards.length;

  //grow the set
  if (clickedcards.length === 1) {
    $(".setinprogress").animate(
      {
        height:'+=10',
        width:'+=14',
        left:'-=5',
        top:'-=5px',
        fontSize:'+=3'
      },
      1400
    ).text(setsize);
  } else if(clickedcards.length > 1 && clickedcards.length <= 5) {
    $(".setinprogress").animate(
      {
        height:'+=20',
        width:'+=24',
        left:'-=10',
        top:'-=10px',
        fontSize:'+=5'
      },
      900
    ).text(setsize);
  } else if(clickedcards.length > 5 && clickedcards.length <= 10){
      $(".setinprogress").animate(
        {
          height:'+=25',
          width:'+=29',
          left:'-=13',
          top:'-=13px',
          fontSize:'+=7'
        },
        500
      ).text(setsize);
  } else if(clickedcards.length > 10){
    $(".setinprogress").animate(
      {
        height:'+=30',
        width:'+=34',
        left:'-=20',
        top:'-=20px',
        fontSize:'+=15'
      },
      300
    ).text(setsize);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="setinprogress" class="setinprogress" style="display:none; top:580px;left: 250px; box-shadow: 10px 10px black; z-index: 1;height:10px;width:10px;"></div>

然后当你点击另一个按钮时，这个 div 会被隐藏(显示:无)，我希望它恢复到原来的大小:

$("#setsavebutton").on("click",function(){
    setsize = 0;
    page = 1;
    questionsaddedclicks = 0;

    $("#setnamediv").effect("clip",500);
    $("#setbuttondiv").effect("clip",500);
    $("#setinprogress").effect("puff",400);

    $("#setinprogress").height(10);
    $("#setinprogress").width(10);
});

... 但是如果您单击使它再次增长的按钮，它就会处于隐藏之前的高度，就好像 .width() 和 height() 没有效果一样。

Answer 1

使用超时或类似的方式等待动画完成。您也可以使用 .queue 函数等待。

https://api.jquery.com/queue/

我也创建了一个 jsfddle。

setTimeout(function(){
$("#setinprogress").css({
    width: 10,
  height: 10,
  fontSize: '12px',
  top: 0,
  left: 0
});
}, 500);

https://jsfiddle.net/tf8dcqj4/3/