jquery - 最大化和最小化 Div - jQuery

Question

我正在尝试使用 jQuery 获取一个 div 以在单击时将其高度增加到 300px，但如果它已经是 300px（即最大化），那么如果单击它应该将其高度降低到 40px。我知道这可能是一个绝对初学者的问题，但我对 jQuery 真的很陌生，到目前为止还没有找到答案。

到目前为止，我所管理的只是最小化代码：

$("#banner_animate").click(function(){
  $("#banner_animate").animate({
    height: "40px"
  }, 500 );
});

一些帮助将不胜感激！

Answer 1

除了 jquery 解决方案，我建议使用 CSS 解决方案（CSS 转换与 jQuery 相结合）

两个 CSS 规则

#banner_animate{
   height:300px;
   transition: height 0.5s linear;
}

#banner_animate.minimized{
   height:40px;
}

只需添加/删除minimized类

$("#banner_animate").click(function(){
   $(this).toggleClass('minimized');
});

演示在 http://jsfiddle.net/gaby/CsttH/

Answer 2

检查 $("#banner_animate").height() 并添加逻辑以相应地设置“新高度”变量。40 或 300

Answer 3

演示：http: //jsfiddle.net/fD7xz/

$('#banner_animate').click(function() {
  var height = $('#banner_animate').height() == 300 ? 40 : 300;
  $('#banner_animate').animate({ height: height + 'px' }, 500 );
});

Answer 4

$("#banner_animate").click(function(){
    var h = $(this).height() == 300 ? 40 : 300;
    $(this).animate({
        height: h
    }, 500 );
});

上面的变量声明是一个三元运算符……我们测试一下高度是不是300，如果是，那么h就是40，否则h就是300。