使用JQuery上下滑动直到特定高度 - 是否可能？

Question

有没有可能将div向上滑动（关闭它），但不完全关闭？

我的意思是，向上滑动但保留一小部分div显示出来，这可行吗？

提前感谢， mem

- MEM

---

你可能只想要动画/改变高度。 - ayyp

Answer 1

可能类似这样的东西可以运作：

$("#div").toggle(
function(){
   $("#div").animate( { height:"500px" }, { queue:false, duration:500 });
},
function(){
   $("#div").animate( { height:"50px" }, { queue:false, duration:500 });
});

不必使用500px，可以直接使用

的原始大小，30px是隐藏时要显示的大小。

来自评论的更新

这里有一个fiddle示例，如果在变量中声明了不同的高度，它也可以允许不同的高度。并且在动画后淡出也不应该成为问题。

http://jsfiddle.net/Skooljester/HdQSX/

var divTest = $("#test").height();
$("#test").toggle(
function(){
   $("#test").animate({ height: divTest + 'px' }, { queue: false, duration: 500 });
},
function(){
   $("#test").animate({ height:'50px' }, { queue: false, duration: 500 });
});

#test {
  display: block;
  background: #FF0000;
  height: 500px;
  width: 300px;
}

<div id="test">Test</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

- ayyp

---

非常感谢！有两件事情：1）我们必须始终声明原始div的高度吗？我问这个问题是因为...高度可能会根据内容而变化。2）如果我们希望在此之后淡出刚刚动画的那一小部分，可以吗？ - MEM

这是一个示例，显示如果在变量中声明，则可以允许不同的高度：http://jsfiddle.net/Skooljester/HdQSX/ 动画后淡出不应该是个问题。 - ayyp

这个方法的签名在jQuery 1.8中已被废弃，并在jQuery 1.9中被删除。jQuery还提供了一个名为.toggle()的动画方法，用于切换元素的可见性。 - Gleb Kemarsky

Answer 2

我建议不要使用jQuery的animate方法，因为在某些浏览器中它有时会出现故障。 使用CSS过渡动画来滑动是更好的选择（在我看来），只需设置div的高度或最大高度即可。

CSS:

.expandable {
  max-height: 3em;
  overflow: hidden;
  transition: max-height .3s;
}

点击后，使用jQuery设置最大高度：

$(.someSelector).css('max-height', expandedHeight);

然后再次点击时删除样式：

$(.someSelector).attr('style', '');

你可以查看此示例演示。

- Calsal

Answer 3

更好的打开div到其原始高度的方法是使用slideDown()函数。 问题在于，该函数要求在打开之前将div隐藏起来。 以下方法有点丑陋，但效果很好：

$("#test").toggle(
function(){
   $("#test").css('height', 'auto').hide().slideDown('fast');
},
function(){
   $("#test").animate( { height:'50px' }, { queue:false, duration:500 });
});

- Skatrix