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。

最大化和最小化Div - jQuery

4 个答案: