javascript - Div 动画消失，而不是调整大小

Question

出于某种原因，当我尝试使用 .animate 在两种尺寸之间切换 div 时，它只是消失了，而不是缩放到我想要的尺寸。我以很多方式玩过所有的语法和小东西，但没有任何效果。这是我用过的 jquery 和一堆乱七八糟的东西。

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

我这里有一个 jsfiddle 供您查看。 http://jsfiddle.net/justinbc820/qt7GV/

Answer 1

看看这个http://jsfiddle.net/qt7GV/4/

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

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

Answer 2

在不使用切换的情况下尝试

http://jsfiddle.net/qt7GV/9/

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

Answer 3

http://api.jquery.com/toggle/

说明：显示或隐藏匹配的元素。

var on = false;
var box = $("#expandable");
box.click(
    function() {

        if (on = !on) { 
            box.animate(
                    {width:600, height:600}
                )
        } else {
            box.animate(
                    {width:400, height:200}
                );
        }            

    }
);

Answer 4

根据http://api.jquery.com/toggle-event/

注意：此方法签名在 jQuery 1.8 中已弃用，并在 jQuery 1.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'));
  }
);