使用JQuery向上/向下滑动到一定的高度-这是可能的吗？

Question

是否可以向上滑动div (关闭它)，但不能完全？

我的意思是，向上滑动，但保留一点div显示出来，这是可能的吗？

提前谢谢你，梅姆

Answer 1

像这样的东西可能会起作用：

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

它可以只是500px的原始大小，而不是div的大小，并且30px可以是您希望在隐藏时显示的任意大小。

根据评论进行更新

下面的小提琴展示了如果在变量中声明，它可以允许不同的高度。在动画之后淡出应该不是问题。

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>

​

Answer 2

我不推荐使用jQuery的animate方法，因为它在某些浏览器中有时会出现错误。通过设置div高度或最大高度，使用CSS过渡设置幻灯片动画效果是一个更好的选择(根据我的说法)。

CSS：

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

单击时，使用jQuery设置最大高度：

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

然后再次单击样式时将其删除：

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

你可以看看this demo example

Answer 3

将div打开到其原始高度的更好方法是使用slideDown()。问题是这个函数需要隐藏div，然后才能打开它。下面的方法有点难看，但效果很好：

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