Javascript Div animate将消失，而不是调整大小

出于某种原因，当我尝试使用.animate在两个大小之间切换div时，它只是消失，而不是缩放到我想要的大小。我已经用很多方法处理了所有的语法和一些小东西，但都不管用。这是我使用过的jquery，我把它弄得乱七八糟

$("#expandable").click(
    function() {
        $("#expandable").toggle(
            function() {
                $("#expandable").animate(
                    {width:600, height:600}
                )
            },
            function() {
                $("#expandable").animate(
                    {width:400, height:200}
                );
            }
        );
    }
);

我这里有一个JSFIDLE给你看。

描述：显示或隐藏匹配的元素

据

注意：此方法签名在jQuery1.8中被弃用，并在jQuery1.9中被删除。jQuery还提供了一个名为.toggle（）的动画方法，用于切换元素的可见性。是否激发动画或事件方法取决于传递的参数集

这是一种方法

$('#expandable').data('flag', true);
$("#expandable").click(
  function() { 
    $("#expandable").animate(
        $(this).data('flag') 
        ? {width:600, height:600}
        : {width:400, height:200}
    )
    $(this).data('flag', !$(this).data('flag'));
  }
);

---

不使用切换就可以尝试

$(document).ready(function(){
  $("#expandable").click(function(){
      var divheight = $(this).height();
      if (divheight == 400)
      {
          $(this).animate({height:'150px', width:'150px' });
      }
      else
      {
          $(this).animate({height:'400px', width:'400px' });
      }
  });
});

看看这个

$（“#可展开”）。单击（函数（）{
如果（$（this）.width（）<600）{
$（此）。设置动画(
{宽：600，高：600}
)
}否则{
$（此）。设置动画(
{宽：400，高：200}
);
}
});

切换

将

显示/隐藏

带有新jquery切换的div的行为与以前不同。因此，请尝试使用普通的单击侦听器。这不是切换。这将在每次单击时执行两个操作。@我请检查again@zzalalani我不知道谁给了你-1，但我给了你+1，因为你给出了正确的答案

$(document).ready(function(){
  $("#expandable").click(function(){
      var divheight = $(this).height();
      if (divheight == 400)
      {
          $(this).animate({height:'150px', width:'150px' });
      }
      else
      {
          $(this).animate({height:'400px', width:'400px' });
      }
  });
});

$("#expandable").click(function() {

    if ($(this).width() < 600) {
         $(this).animate(
             {width:600, height:600}
         )
    } else {
        $(this).animate(
            {width:400, height:200}
        );
    }
});