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

Div animate disappears, rather than resizing

本文关键字：调整 动画 消失 Div      更新时间：2023-09-26
出于

某种原因，当我尝试使用 .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/

不使用切换开关尝试一下

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

看看这个 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}
        );
    }
});

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

根据 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'));
  }
);
相关文章：